Vue2.0實現(xiàn)將頁面中表格數(shù)據(jù)導出excel的實例
更新時間：2017年08月09日 09:51:12 作者：我愛吃花椒
本篇文章主要介紹了Vue2.0實現(xiàn)將頁面中表格數(shù)據(jù)導出excel的實例，非常具有實用價值，感興趣的同學可以了解一下
這兩天學習了Vue.js 感覺知識點挺多的，所以，今天添加一點小筆記。
項目中將后臺返回的數(shù)據(jù)v-for到表格中，然后需要將這個表格導出為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]))
}
四、按鈕導出調(diào)用export2Excel方法
注：如果webpack報解析錯誤：
在build----webpack.base.conf.js中resolve的alias加入 'vendor': path.resolve(__dirname, '../src/vendor'),
即可解決
另：alias是配置別名
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue實現(xiàn)圓環(huán)進度條的示例，幫助大家更好的理解和使用前端框架進行開發(fā)，感興趣的朋友可以了解下2021-02-02
項目中我們可能會碰到導出Excel文件的需求，這篇文章主要介紹了vue中導出Excel表格的實現(xiàn)代碼，非常具有實用價值，需要的朋友可以參考下2018-10-10
這篇文章主要介紹了配置一個vue3.0項目的完整步驟，從0開始配置一個vue項目，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-04 
使用axios請求接口,幾種content-type的區(qū)別詳解
今天小編就為大家分享一篇使用axios請求接口,幾種content-type的區(qū)別詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10 
這篇文章主要介紹了Vue3中的Token失效攔截處理方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-08-08 
vue+element多選級聯(lián)選擇器自定義props使用詳解
這篇文章主要給大家介紹了關于vue+element多選級聯(lián)選擇器自定義props使用的相關資料,級聯(lián)選擇器展示的結果都是以數(shù)組的形式展示,也就是v-model綁定的結果,需要的朋友可以參考下
2023-07-07 
這篇文章主要為大家詳細介紹了vue.js實現(xiàn)簡單輪播圖效果的相關代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-10-10 
這篇文章主要介紹了vue-cli3+typescript初體驗小結，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-02-02 
elementUI如何動態(tài)給el-tree添加子節(jié)點數(shù)據(jù)children詳解
element-ui 目前基本成為前端pc網(wǎng)頁端標準ui框架,下面這篇文章主要給大家介紹了關于elementUI如何動態(tài)給el-tree添加子節(jié)點數(shù)據(jù)children的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-11-11