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