vue导出Excel表格（简单）

一、安装依赖

npm install -S file-saver xlsx
npm install -D script-loader


二、下载文件

在 /src 目录下新建 vendor文件夹&＃xff0c;用于存放 Blob.js 和 Export2Excel.js 文件。

百度网盘下载地址
链接: https://pan.baidu.com/s/1efys5Awc5BxMdK71Jy1vKw 提取码: kjns


三、修改Export2Excel.js文件

如图&＃xff0c;将红框中的路径修改你的Blob.js文件实际路径。不然会报错。

四、创建util.js文件用于统一处理export2Excel的数据

export function export2Excel(columns, list, title) {require.ensure([], () &＃61;> {const { export_json_to_excel } &＃61; require(&＃39;&＃64;/utils/excel/Export2Excel&＃39;)let tHeader &＃61; []let filterVal &＃61; []if (!columns) {return}columns.forEach(item &＃61;> {tHeader.push(item.title)filterVal.push(item.key)})const data &＃61; list.map(v &＃61;>filterVal.map(j &＃61;> {let value &＃61; v[j]let column &＃61; columns.find(col &＃61;> col.key &＃61;&＃61;&＃61; j)const { transform } &＃61; columnif (transform && typeof transform &＃61;&＃61;&＃61; &＃39;function&＃39;) {value &＃61; transform(v[j])}return value}))export_json_to_excel(tHeader, data, title || &＃39;数据列表&＃39;)})
}


五、组件使用

<template><div class&＃61;"home"><button &＃64;click&＃61;"handleExport">导出</button></div>
</template><script>
const dataList &＃61; [{key: &＃39;1&＃39;,name: &＃39;Brown John&＃39;,sex: 0,age: 32,tel: &＃39;0571-22098909&＃39;,phone: 18889898989,address: &＃39;New York No. 1 Lake Park&＃39;},{key: &＃39;2&＃39;,name: &＃39;Jim Green&＃39;,sex: 1,tel: &＃39;0571-22098333&＃39;,phone: 18889898888,age: 42,address: &＃39;London No. 1 Lake Park&＃39;},
]
const exportColumns &＃61; [{title: &＃39;序号&＃39;,key: &＃39;key&＃39;},{title: &＃39;姓名&＃39;,key: &＃39;name&＃39;},{title: &＃39;性别&＃39;,key: &＃39;sex&＃39;,transform: (text) &＃61;> {switch (text) {case 0:return &＃39;女生&＃39;breakcase 1:return &＃39;男生&＃39;breakdefault:return &＃39;变态&＃39;break}}},{title: &＃39;地址&＃39;,key: &＃39;address&＃39;},
]
import { export2Excel } from &＃39;&＃64;/utils/util&＃39;
export default {methods: {handleExport () {export2Excel(exportColumns, dataList, &＃39;表格名称&＃39;)}}
};
</script>

参考

参考1
参考2
参考3
导出多级表头
js-xlsx 实现 Excel 文件导出功能

数据流方式&＃xff08;后台生成复杂表格&＃xff09;

// 档案导出exportCard (record) {const params &＃61; {unitSn: record.unitSn,userId: record.id}exportCard(params).then(res &＃61;> {const link &＃61; document.createElement(&＃39;a&＃39;)const blob &＃61; new Blob([res], { type: &＃39;application/vnd.ms-excel&＃39; })link.style.display &＃61; &＃39;none&＃39;link.href &＃61; URL.createObjectURL(blob)link.setAttribute(&＃39;download&＃39;, decodeURI(&＃39;基础信息—&＃39; &＃43; record.userName))document.body.appendChild(link)link.click()document.body.removeChild(link)})}