Vue 纯前端导出Excel
实际开发，遇到要求只在前端进行导出Excel文件的需求，而非调用接口形式。
1.使用npm下载插件
npm 命令行如下：
npm install xlsx file-saver -S
npm install script-loader -S -D
也可以使用 cnpm :
cnpm install xlsx file-saver -S
cnpm install script-loader -S -D
2.在 -src文件夹下创建增加两个文件：
如图：
文件位置
文件资源路径：
链接:https://pan.baidu.com/s/1faCXdvqoiyagGWID3_e_PA
密码:bau3
下载记得点赞，口享！
3. 封装、使用
按钮使用：
<el-tooltip class="item" effect="dark" content="导出" placement="bottom">
<el-button type="primary" circle icon="el-icon-download" @click="exportExcelData" />
</el-tooltip>
// click事件
exportExcelData () {
// 省略的逻辑代码 ......
exportExcel(columnTitle, columnData, "我的导出文件名"); //调用封装好的方法
}
这里要说注意下，这个导出数据我的是一个二维数组，需要做一个处理
封装成公共的方法：
// 导出Excel
export function exportExcel(columns,list,excelName){
require.ensure([], () => {
const { export_json_to_excel } = require('../vender/Export2Excel');//注意引入资源路径问题（我这里是相对路径）
let tHeader = []
let filterVal = []
columns.forEach(item =>{
tHeader.push(item.title)
filterVal.push(item.key)
})
let data = []
list.forEach(v => {
v.forEach((item, j) =>{
let a = data[j] = data[j] || []
a.push(item)
})
})
export_json_to_excel(tHeader, data, excelName);
})
}
4. 导出结果
如图：
导出的excel
