原文地址:https://www.cnblogs.com/dxxzst/p/10253611.html
一、安裝依賴（前面基本一樣）
|
1
2
3
|
npm install file-saver --save
npm install xlsx --save
npm install script-loader --save-dev
|
二、下載兩個所需要的js文件Blob.js和 Export2Excel.js。
這里下載：下載地址
三、src目錄下新建vendor文件夾，將Blob.js和 Export2Excel.js放進去。
四、更改webpack.base.conf.js配置
在resolve的alias：
|
1
|
'vendor'
: path.resolve(__dirname,
'../src/vendor'
)
|
五、在.vue文件中
script部分：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
data(){
return
{
list:[
{
name:
'韓版設計時尚風衣大'
,
number:
'MPM00112'
,
salePrice:
'￥999.00'
,
stocknums:3423,
salesnums:3423,
sharenums:3423,
},
{
name:
'韓版設計時尚風衣大'
,
number:
'MPM00112'
,
salePrice:
'￥999.00'
,
stocknums:3423,
salesnums:3423,
sharenums:3423,
},
]
}
methods:{
formatJson(filterVal, jsonData) {
return
jsonData.map(v => filterVal.map(j => v[j]))
},
export2Excel() {
require.ensure([], () => {
const { export_json_to_excel } = require(
'../../../vendor/Export2Excel'
);
const tHeader = [
'商品名稱'
,
'商品貨號'
,
'售價'
,
'庫存'
,
'銷量'
,
'分享'
,];
const filterVal = [
'name'
,
'number'
,
'salePrice'
,
'stocknums'
,
'salesnums'
,
'sharenums'
, ];
const list =
this
.goodsItems;
const data =
this
.formatJson(filterVal, list);
export_json_to_excel(tHeader, data,
'商品管理列表'
);
})
}
}
|
template:
|
1
|
<button @click=
"export2Excel"
>導出</button>
|
這里說明一下：
- export2Excel()中require的路徑因個人項目結構不同可能需要單獨調整，如果報module not found '../../Export2Excel.js'之類請自行修改路徑。
- tHeader是每一欄的名稱，需手動輸入。
- filterVal是data中list的key值，也是要自己寫的。
- 這里記得要與data里面的list名稱對應
5、這里可定義導出的excel文件名
參考：https://www.cnblogs.com/Mrfan217/p/6944238.html