近期由于項(xiàng)目需要，需要將頁面中的表格數(shù)據(jù)導(dǎo)出excel格式的文件，折騰了許久，在網(wǎng)上各種百度，雖然資料不少，但是大都不全，踩了許多坑，總算是皇天不負(fù)有心人，最后圓滿解決了。

　　1、安裝相關(guān)依賴(npm安裝可能會(huì)出現(xiàn)某些錯(cuò)誤，可以使用cnpm)：

npm install file-saver --save // 保存文件用 npm install xlsx --save // 轉(zhuǎn)二進(jìn)制用 npm install script-loader --save-dev // xlsx核心文件

　　

　　2、下載兩個(gè)核心js文件，Blob.js和 Export2Excel.js? 下載地址：Blob.js和 Export2Excel.js文件

　　

　　3、在src目錄下新建vendor文件夾，將Blob.js和 Export2Excel.js放進(jìn)去。

　　4、更改webpack.base.conf.js配置。

　　在resolve的alias里添加如下代碼：

'vendor': path.resolve(__dirname, '../src/vendor')

　　5、在需要導(dǎo)出excel格式文件的頁面中寫入以下兩個(gè)方法，如：

methods: {formatJson(filterVal, jsonData) {return jsonData.map(v => filterVal.map(j => v[j]))},export2Excel() {const _this = thisrequire.ensure([], () => {const { export_json_to_excel } = require('../vendor/Export2Excel');const tHeader = ['ID', '封面', '小說名','二級(jí)分類','作者','進(jìn)度','更新時(shí)間', '狀態(tài)'];const filterVal = ['novelId', 'imageUrl', 'title', 'categoryName', 'author', 'completeStatus', 'updateTime', 'status'];const list = _this.dataList;const data = _this.formatJson(filterVal, list);export_json_to_excel(tHeader, data, '小說列表');})}}

　　注意：tHeader表示表頭的標(biāo)題，filterVal表示表頭的字段名，可通過點(diǎn)擊事件調(diào)用導(dǎo)出方法。

<button type="primary" @click="export2Excel">導(dǎo)出</button>

轉(zhuǎn)載于:https://www.cnblogs.com/sunjuncoder/p/9894691.html

總結(jié)

以上是生活随笔為你收集整理的将页面中表格数据导出excel格式的文件（vue）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。