Vue導(dǎo)出Excel功能的全過程記錄
1.前端主導(dǎo)流程：
1.點擊頁面中導(dǎo)出按鈕（注冊點擊事件）
2.事件回調(diào)里面，發(fā)送請求后臺數(shù)據(jù)
3.對后臺數(shù)據(jù)進行處理，完成想要的效果
4.生成Excel文件
2. 插件使用及初始化
2.1 借助vue-admin中提供的方法。
將其插件包復(fù)制粘貼到自己項目下的src文件夾下面
2.2 安裝插件依賴。
注：大概率會報錯，這個階段出啥錯基本都是依賴沒安裝，都裝上就好了
npm install file-saver script-loader --save
2.3 回調(diào)函數(shù)內(nèi)容如下
當我們正式點擊`導(dǎo)出`按鈕之后，才去加載vendor文件夾中的Export2Excel模塊
當我們正式點擊`導(dǎo)出`按鈕之后，才去加載vendor文件夾中的Export2Excel模塊
import('@/vendor/Export2Excel').then(excel => {
// excel表示導(dǎo)入的模塊對象 //import方法執(zhí)行完畢返回的是一個promise對象，
// 在then方法中我們可以拿到使用的模塊對象
console.log(excel)
excel.export_json_to_excel({
header: ['姓名', '工資'], // 表頭 必填
data: [
['劉備', 100], //重點關(guān)注data的配置部分，我們發(fā)現(xiàn)它需要一個嚴格的二維數(shù)組
['關(guān)羽', 500]
], // 具體數(shù)據(jù) 必填
filename: 'excel-list', // 文件名稱
autoWidth: true, // 寬度是否自適應(yīng)
bookType: 'xlsx' // 生成的文件類型
})
})
Excel導(dǎo)出參數(shù)說明
注意：到這里為止，其實已經(jīng)完成了簡單的導(dǎo)出效果，用的是自己寫的假數(shù)據(jù)。實際項目中肯定是拿的后臺返回的數(shù)據(jù)，并且要對格式做修改，達到我們想要的效果（真測試了，上面的步驟跟著做就可完成。） 效果如下：
3.對后臺數(shù)據(jù)進行處理，完成想要的效果
比如說后臺返回的表頭是英文需要轉(zhuǎn)化成中文，然后格式不是插件要的格式。
后臺返回數(shù)據(jù)：
需要將key轉(zhuǎn)成中文，將value抓換成數(shù)組。
3.1 準備一個數(shù)據(jù)處理函數(shù)（最后會在回調(diào)里面使用）
3.2 先處理表頭，定義一個對象，目的是待會將表頭的英文轉(zhuǎn)成中文
const map = {
'id': '編號',
'password': '密碼',
'mobile': '手機號',
'username': '姓名',
'timeOfEntry': '入職日期',
'formOfEmployment': '聘用形式',
'correctionTime': '轉(zhuǎn)正日期',
'workNumber': '工號',
'departmentName': '部門',
'staffPhoto': '頭像地址'
}
3.3 定義表頭
header = [待會將英文的表頭轉(zhuǎn)成中文的，是個數(shù)組的形式]
如下代碼所示效果：
header = ['id', 'mobile', 'username',……]
3.4 要處理后臺返回數(shù)據(jù)
后臺返回數(shù)組，定義one是第一個數(shù)據(jù)，目的是以第一個數(shù)據(jù)為樣本設(shè)置表頭，如果第一條數(shù)據(jù)是false的話，說明后臺啥也沒返回，那就全劇終。
如下代碼所示效果：
const one = list[0]
if (!one) {
return { header, data }
}
3.5 表頭處理邏輯
01 `Object.keys(one) ` 這個是遍歷對象取出key組成一個數(shù)組。
02 ` map` 方法遍歷對每一個項進行做事返回一個數(shù)組
03 `return map[key] ` 可以看做 map.id = '編號'（便于理解）；map方法不停的對map對象做事而map[key]其實就是值，如 ‘編號'、‘部門'… 然后組成一個數(shù)組 如：['姓名', '工資']
header = Object.keys(one).map(key => {
return map[key]
})
3.6 表格data處理邏輯
目標：后臺返回正式員工和非正式員工用1和2表示，我們需要將數(shù)字轉(zhuǎn)成文字，并且需要讓他們變成數(shù)組的格式。
01-首先后臺返回的Obj['formOfEmployment']是數(shù)字1 , 2 我們要他們變成---> '正式'， '非正式'
02-obj['formOfEmployment'] = hireTypEnmu[key] 這段代碼意思是將漢字設(shè)置給左邊的數(shù)字，實現(xiàn)替換。我們分別看左右代表什么。
03- obj['formOfEmployment'] 此時是數(shù)字
04-hireTypEnmu:{1:'正式', '2':'非正式' }這是我們自己定義的對象
05-hireTypEnmu[key] --key是數(shù)字--所以他是value是漢字
如下代碼所示效果：
// data把list中每一個對象轉(zhuǎn)成 對應(yīng)的value數(shù)組
// hireTypEnmu:{1:'正式', '2':'非正式' }
data = list.map(obj => {
// 把 Obj['formOfEmployment']: 1 , 2 ---> '正式'， '非正式'
const key = obj['formOfEmployment'] // 1, 2
obj['formOfEmployment'] = hireTypEnmu[key]
return Object.values(obj)
})
3.7 函數(shù)返回
將處理好的數(shù)據(jù)返回
return { header, data }
3.8 最終完成
這個時候，將這個函數(shù)拿到回調(diào)函數(shù)里面，header和data的數(shù)據(jù)之前已經(jīng)有了。
完成代碼如下：
hExport() {
import('@/vendor/Export2Excel').then(async excel => {
// 發(fā)ajax請求，獲取數(shù)據(jù)
const res = await getEmployee(this.page, this.size)
const list = res.data.rows
console.log('從后端獲取的數(shù)據(jù)', list)
const { header, data } = this.formatData(list)
// excel表示導(dǎo)入的模塊對象
console.log(header, data)
excel.export_json_to_excel({
// header: ['姓名', '工資'], // 表頭 必填
header: header, // 表頭 必填
data: data,
filename: 'excel-list', // 文件名稱
autoWidth: true, // 寬度是否自適應(yīng)
bookType: 'xlsx' // 生成的文件類型
})
})
},
總結(jié)：
以上代碼經(jīng)過測試，可以直接使用達成效果。
附：vue-element-admin碼云拉取，這個版本是二次開發(fā)功能多的那款
# git clone https://github.com/panjiachen/vue-element-admin.git # 從github上拉取代碼 $ git clone https://gitee.com/mirrors/vue-element-admin.git # 從碼云上拉取 $ cd vue-element-admin # 切換到具體目錄下 $ npm install # 安裝所有依賴 $ npm run dev # 啟動開發(fā)調(diào)試模式 查看package.json文件的scripts可知曉啟動命令
到此這篇關(guān)于Vue導(dǎo)出Excel功能的文章就介紹到這了,更多相關(guān)Vue導(dǎo)出Excel功能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3 響應(yīng)式對象如何實現(xiàn)方法的不同點
這篇文章主要介紹了vue3 響應(yīng)式對象如何實現(xiàn)方法的不同點，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
在開發(fā)中我們想要給一個組件的顯示和消失添加某種過渡動畫,可以很好的增加用戶體驗,下面這篇文章主要給大家介紹了關(guān)于如何快速上手Vue3過渡動畫的相關(guān)資料,需要的朋友可以參考下2022-02-02
Vue element-UI el-select循環(huán)選中的問題
這篇文章主要介紹了Vue element-UI el-select循環(huán)選中的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue封裝swiper代碼實例解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10
使用Vant如何實現(xiàn)數(shù)據(jù)分頁,下拉加載
這篇文章主要介紹了使用Vant實現(xiàn)數(shù)據(jù)分頁及下拉加載方式。具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
下面小編就為大家分享一篇基于Vue2.X的路由和鉤子函數(shù)詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
在開發(fā)中我們想要給一個組件的顯示和消失添加某種過渡動畫,可以很好的增加用戶體驗,下面這篇文章主要給大家介紹了關(guān)于Vue3過渡動畫踩坑的相關(guān)資料,需要的朋友可以參考下2021-12-12
這篇文章主要給大家介紹了關(guān)于vue如何批量引入組件、注冊和使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
Vant?如何修改van-collapse-item右側(cè)圖標
這篇文章主要介紹了Vant?如何修改van-collapse-item右側(cè)圖標，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
下面小編就為大家?guī)硪黄猇ue2.0 從零開始_環(huán)境搭建操作步驟。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06