Vue導(dǎo)出json數(shù)據(jù)到Excel電子表格的示例
網(wǎng)上看了很多文檔感覺都不全，這里寫一篇完整的詳細(xì)教程。
一、安裝依賴（前面基本一樣）
npm install file-saver --save npm install xlsx --save npm install script-loader --save-dev
二、下載兩個(gè)所需要的js文件Blob.js和 Export2Excel.js。
這里貼下下載地址：
三、src目錄下新建vendor文件夾，將Blob.js和 Export2Excel.js放進(jìn)去。
四、更改webpack.base.conf.js配置
在resolve的alias：
'vendor': path.resolve(__dirname, '../src/vendor')
五、在.vue文件中
script部分
data(){
return{
list:[
{
name:'韓版設(shè)計(jì)時(shí)尚風(fēng)衣大',
number:'MPM00112',
salePrice:'￥999.00',
stocknums:3423,
salesnums:3423,
sharenums:3423,
},
{
name:'韓版設(shè)計(jì)時(shí)尚風(fēng)衣大',
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 = ['商品名稱','商品貨號(hào)','售價(jià)','庫(kù)存','銷量','分享',];
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:
<button @click="export2Excel">導(dǎo)出</button>
這里說(shuō)明一下：
1、export2Excel()中require的路徑因個(gè)人項(xiàng)目結(jié)構(gòu)不同可能需要單獨(dú)調(diào)整，如果報(bào)module not found '../../Export2Excel.js'之類請(qǐng)自行修改路徑。
2、tHeader是每一欄的名稱，需手動(dòng)輸入。
3、filterVal是data中l(wèi)ist的key值，也是要自己寫的。
4、這里記得要與data里面的list名稱對(duì)應(yīng)
5、這里可定義導(dǎo)出的excel文件名
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue中的rem如何配置，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue中的<template>標(biāo)簽與react中的<></>標(biāo)簽區(qū)別詳解
這篇文章主要為大家介紹了vue中的<template>標(biāo)簽與react中的<></>標(biāo)簽區(qū)別詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
vue 封裝自定義組件之tabal列表編輯單元格組件實(shí)例代碼
這篇文章主要介紹了vue 封裝自定義組件tabal列表編輯單元格組件實(shí)例代碼,需要的朋友可以參考下2017-09-09
在本篇文章里小編給大家分享了關(guān)于VUE中使用MUI方法和步驟，有需要的朋友們可以學(xué)習(xí)參考下。2019-02-02
今天小編就為大家分享一篇vue.js單文件組件中非父子組件的傳值實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue中datepicker的使用教程實(shí)例代碼詳解
這篇文章主要介紹了vue-datepicker的使用，本文通過(guò)實(shí)例代碼大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
這篇文章主要為大家介紹了Vue搭建Vuex環(huán)境，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2021-11-11
vue elementUI下拉框值無(wú)法選中問(wèn)題及解決方案
大家在寫系統(tǒng)的時(shí)候,會(huì)有這樣的需求：點(diǎn)擊修改后把需要修改的數(shù)據(jù)放入表單,其中會(huì)有下拉單選框、下拉多選框,展示下拉框單選框內(nèi)的數(shù)據(jù)只需要將所選id賦值給下拉框綁定的值就可以了,下面給大家分享vue elementUI下拉框值無(wú)法選中問(wèn)題,感興趣的朋友一起看看吧2024-03-03
淺談Vue.js 1.x 和 2.x 實(shí)例的生命周期
下面小編就為大家?guī)?lái)一篇淺談Vue.js 1.x 和 2.x 實(shí)例的生命周期。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
你不知道的Vue技巧之--開發(fā)一個(gè)可以通過(guò)方法調(diào)用的組件(推薦)
這篇文章主要介紹了你不知道的Vue技巧之--開發(fā)一個(gè)可以通過(guò)方法調(diào)用的組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04