Vue導(dǎo)出json數(shù)據(jù)到Excel電子表格的示例
網(wǎng)上看了很多文檔感覺(jué)都不全，這里寫(xiě)一篇完整的詳細(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ù)存','銷(xiāo)量','分享',];
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值，也是要自己寫(xiě)的。
4、這里記得要與data里面的list名稱對(duì)應(yīng)
5、這里可定義導(dǎo)出的excel文件名
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇關(guān)于vue中$nextTick的用法講解，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
Vue.js實(shí)現(xiàn)模擬微信朋友圈開(kāi)發(fā)demo
本篇文章主要介紹了Vue.js實(shí)現(xiàn)模擬微信朋友圈開(kāi)發(fā)demo，實(shí)現(xiàn)展示朋友圈，評(píng)論，點(diǎn)贊等功能，有興趣的可以了解一下。2017-04-04
在Vue3環(huán)境下,使用LogicFlow可實(shí)現(xiàn)流程圖的繪制,詳細(xì)步驟包括引入LogicFlow庫(kù),注冊(cè)節(jié)點(diǎn)與邊,設(shè)置主題和渲染數(shù)據(jù),還包括使用Map和Menu進(jìn)行功能擴(kuò)展和右鍵編輯,以及通過(guò)事件監(jiān)聽(tīng)實(shí)現(xiàn)交互,2024-10-10
這篇文章主要介紹了Element中Slider滑塊的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了正確快速使用Vue中的插槽和配置代理的相關(guān)知識(shí),插槽分為三種，分別是默認(rèn)插槽、具名插槽、作用域插槽，下面分別列出了如何使用這三種插槽，需要的朋友可以參考下2023-01-01
混入(mixin)是一種非常靈活的方式,用來(lái)分發(fā)Vue組件中可復(fù)用的功能,一個(gè)混入對(duì)象可以包含任意組件選項(xiàng),下面這篇文章主要給大家介紹了關(guān)于Vue混入和繼承的相關(guān)資料,需要的朋友可以參考下2021-09-09
本文主要介紹了vue3.x頁(yè)面功能拆分方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
Element Plus實(shí)現(xiàn)Affix 固釘
本文主要介紹了Element Plus實(shí)現(xiàn)Affix 固釘，Affix組件用于將頁(yè)面元素固定在特定可視區(qū)域，文中通過(guò)示例代碼介紹的非常詳細(xì)，感興趣的小伙伴們可以參考一下2021-07-07
Element Timeline時(shí)間線的實(shí)現(xiàn)
本文主要介紹了Element Timeline時(shí)間線的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
詳解vuejs中執(zhí)行npm run dev出現(xiàn)頁(yè)面cannot GET/問(wèn)題
這篇文章主要介紹了詳解vuejs中執(zhí)行npm run dev出現(xiàn)頁(yè)面cannot GET/問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04