Vue2.0實(shí)現(xiàn)將頁(yè)面中表格數(shù)據(jù)導(dǎo)出excel的實(shí)例
這兩天學(xué)習(xí)了Vue.js 感覺(jué)知識(shí)點(diǎn)挺多的，所以，今天添加一點(diǎn)小筆記。
項(xiàng)目中將后臺(tái)返回的數(shù)據(jù)v-for到表格中，然后需要將這個(gè)表格導(dǎo)出為EXCEL
只說(shuō)怎么做。
一、需要安裝三個(gè)依賴(lài)：
npm install -S file-saver xlsx npm install -D script-loader
二、項(xiàng)目中新建一個(gè)文件夾：（vendor---名字任?。?/strong>
里面放置兩個(gè)文件Blob.js和 Export2Excel.js。
Blob.js和 Export2Excel.js文件下載地址：Export2Exce_jb51.rar
三、在.vue文件中
寫(xiě)這兩個(gè)方法：其中l(wèi)ist是表格的內(nèi)容
export2Excel() {
require.ensure([], () => {
const { export_json_to_excel } = require('../../vendor/Export2Excel');
const tHeader = ['序號(hào)', 'IMSI', 'MSISDN', '證件號(hào)碼', '姓名'];
const filterVal = ['ID', 'imsi', 'msisdn', 'address', 'name'];
const list = this.tableData;
const data = this.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '列表excel');
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
}
四、按鈕導(dǎo)出調(diào)用export2Excel方法
注：如果webpack報(bào)解析錯(cuò)誤：
在build----webpack.base.conf.js中resolve的alias加入 'vendor': path.resolve(__dirname, '../src/vendor'),
即可解決
另：alias是配置別名
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
尤雨溪開(kāi)發(fā)vue?dev?server理解vite原理
這篇文章主要為大家介紹了尤雨溪開(kāi)發(fā)的玩具vite，vue-dev-server來(lái)理解vite原理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
基于vue2.0實(shí)現(xiàn)簡(jiǎn)單輪播圖
這篇文章主要為大家詳細(xì)介紹了基于vue2.0實(shí)現(xiàn)簡(jiǎn)單輪播圖，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
unplugin-auto-import的配置以及eslint報(bào)錯(cuò)解決詳解
unplugin-auto-import?解決了vue3-hook、vue-router、useVue等多個(gè)插件的自動(dòng)導(dǎo)入,也支持自定義插件的自動(dòng)導(dǎo)入,是一個(gè)功能強(qiáng)大的typescript支持工具,這篇文章主要給大家介紹了關(guān)于unplugin-auto-import的配置以及eslint報(bào)錯(cuò)解決的相關(guān)資料,需要的朋友可以參考下2022-08-08
Vue結(jié)合原生js實(shí)現(xiàn)自定義組件自動(dòng)生成示例
這篇文章主要介紹了Vue結(jié)合原生js實(shí)現(xiàn)自定義組件自動(dòng)生成示例,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01
這篇文章主要介紹了vue3.0安裝Element?ui及矢量圖使用,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-12-12
vue限制實(shí)現(xiàn)不登錄無(wú)法進(jìn)入其他頁(yè)面
本文主要介紹了vue限制實(shí)現(xiàn)不登錄無(wú)法進(jìn)入其他頁(yè)面,vue限制不登錄,通過(guò)url進(jìn)入其他頁(yè)面強(qiáng)制回到登錄頁(yè)面；已經(jīng)登錄的情況下,不可以再進(jìn)入登錄界面,感興趣的可以了解一下2024-01-01
在本篇內(nèi)容里小編給大家整理了關(guān)于vue寫(xiě)h5頁(yè)面的方法以及注意點(diǎn)分析，有需要的朋友們跟著學(xué)習(xí)下吧。2019-02-02
Vue3點(diǎn)擊側(cè)邊導(dǎo)航欄完成切換頁(yè)面內(nèi)組件全過(guò)程(WEB)
寫(xiě)頁(yè)面的時(shí)候都會(huì)用到一些導(dǎo)航欄、點(diǎn)擊不同的部分切換不同的頁(yè)面,下面這篇文章主要給大家介紹了關(guān)于Vue3點(diǎn)擊側(cè)邊導(dǎo)航欄完成切換頁(yè)面內(nèi)組件的相關(guān)資料,需要的朋友可以參考下2023-06-06
在本文里小編給大家整理的是關(guān)于vue項(xiàng)目中引入Sass的相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友們可以測(cè)試參考下。2019-08-08
vue watch關(guān)于對(duì)象內(nèi)的屬性監(jiān)聽(tīng)
這篇文章主要介紹了vue watch關(guān)于對(duì)象內(nèi)的屬性監(jiān)聽(tīng)的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04