一、準備插件
下載地址(別人CSND 免費下載,好人一生平安):https://download.csdn.net/download/hqtc0704/10642331
二、Export2Excel.js 插件的調用 Bolb.js
三、下載Excel,自己寫個函數調用下面handleDownload函數
handleDownload() {
this.downloadLoading = true;
require.ensure([], () => {
const {
export_json_to_excel
} = require('../../../../static/js/Export2Excel.js'); // 這個地址和頁面的位置相關,這個地址是Export2Excel.js相對於頁面的相對位置
const tHeader = ["序號", "客戶", "產品型號", "系列號", "銷售日期", "備註"]; // 這個是表頭名稱 可以是iveiw表格中表頭屬性的title的數組
const filterVal = ["index", "customerName", "machineModel", "seriesNumber", "shipmentTime", "remarks"]; // 與表格數據配合 可以是iview表格中的key的數組
const list = [{
"index": "1",
"customerName": "你好1",
"machineModel": "你好2",
"seriesNumber": "你好3",
"shipmentTime": "你好4",
"remarks": "你好5"
},
{
"index": "2",
"customerName": "hello world 1",
"machineModel": "hello world 2",
"seriesNumber": "hello world 3",
"shipmentTime": "hello world 4",
"remarks": "hello world 5"
},
]; //表格數據,iview中表單數據也是這種格式!
const data = this.formatJson(filterVal, list)
export_json_to_excel(tHeader, data, '列表excel'); // 列表excel,這個是導出表單的名稱
this.downloadLoading = false
})
},
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]))
},
四、額外擴展
iview 的 table 組件有下載csv文件(CSV 逗號分隔值文件格式)的功能,其中的數據格式和Export2Excel.js 的格式相似,無縫連接。
csv文件解釋:百度百科
獲取Table表格數據,(不會用iview那就沒辦法了)
<Table ref="table"></Table>
this.$refs.table.exportCsv({ filename: 'The original data' });
其它導出Excel 的做法:https://www.php.cn/js-tutorial-403064.html