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 = ['商品名稱','商品貨號','售價(jià)','庫存','銷量','分享',]; 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>
這里說明一下:
1、export2Excel()中require的路徑因個(gè)人項(xiàng)目結(jié)構(gòu)不同可能需要單獨(dú)調(diào)整,如果報(bào)module not found '../../Export2Excel.js'之類請自行修改路徑。
2、tHeader是每一欄的名稱,需手動輸入。
3、filterVal是data中l(wèi)ist的key值,也是要自己寫的。
4、這里記得要與data里面的list名稱對應(yīng)
5、這里可定義導(dǎo)出的excel文件名
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue中的<template>標(biāo)簽與react中的<></>標(biāo)簽區(qū)別詳解
這篇文章主要為大家介紹了vue中的<template>標(biāo)簽與react中的<></>標(biāo)簽區(qū)別詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08vue 封裝自定義組件之tabal列表編輯單元格組件實(shí)例代碼
這篇文章主要介紹了vue 封裝自定義組件tabal列表編輯單元格組件實(shí)例代碼,需要的朋友可以參考下2017-09-09vue中datepicker的使用教程實(shí)例代碼詳解
這篇文章主要介紹了vue-datepicker的使用,本文通過實(shí)例代碼大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07淺談Vue.js 1.x 和 2.x 實(shí)例的生命周期
下面小編就為大家?guī)硪黄獪\談Vue.js 1.x 和 2.x 實(shí)例的生命周期。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07你不知道的Vue技巧之--開發(fā)一個(gè)可以通過方法調(diào)用的組件(推薦)
這篇文章主要介紹了你不知道的Vue技巧之--開發(fā)一個(gè)可以通過方法調(diào)用的組件,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04