关于 vue table 导出 excel 表格
大家好，今天给大家分享一下vue 中 导出 excal 表格的几种方法
方法一：
用插件，首先先安装依赖
npm install -S file-saver xlsx
npm install -D script-loader
然后在 src 目录下新建一个文件夹，引入以下两个文件
链接：https://pan.baidu.com/s/1TrXFnvK92miUI42z38Y9DQ
提取码：ff8g
之后再 main.js 中引入这两个文件（路径自行解决）
import Blob from './excel/Blob.js';
import Export2Excel from './excel/Export2Excel.js';
都配置好之后，我们在 methods 中 调用方法
<button @click="export2Excel()">导出报表</button>
export2Excel() {
require.ensure([], () => {
const { export_json_to_excel } = require('../../excal/Export2Excel'); //注意路径
const tHeader = ['姓名', '性别', '电话']; //设置表格标题
const filterVal = ['name', 'sex', 'phone'];//标题对应的属性
const list = this.tableData; //把data里的tableData存到list
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]))
}
原文链接：https://blog.csdn.net/xiaoshihoukediaole/article/details/81296327
方法二：
用原生js，不需插件，直接上代码
exportExcal() { //要导出的json数据 const jsonData = this.tableData; //列标题 我给合并标题合并单元格了 let str = '<tr><th>评估计划</th><th colspan="4">AAA(2019-01-01~2019-01-02)</th><th colspan="4">BBB(2019-03-01~2019-03-02)</th><th colspan="4">CC(2019-04-01~2019-04-02)</th></tr><tr><th>编号</th><th>日期</th><th>姓名</th><th>性别</th><th>年龄</th><th>职业</th><th>爱好</th><th>电话</th><th>邮箱</th><th>省份</th><th>市区</th><th>地址</th><th>邮编</th></tr>'; //循环遍历，每行加入tr标签，每个单元格加td标签 for (let i = 0; i < jsonData.length; i++) { str += '<tr>'; for (let item in jsonData[i]) { //增加\t为了不让表格显示科学计数法或者其他格式 str += `<td>${ jsonData[i][item] + '\t'}</td>`; } str += '</tr>'; } //Worksheet名 let worksheet = 'Sheet1' let uri = 'data:application/vnd.ms-excel;base64,'; //下载的表格模板数据 let template = `<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"> <head><meta charset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet> <x:Name>${worksheet}</x:Name> <x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet> </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--> </head><body><table>${str}</table></body></html>`; //下载模板 window.location.href = uri + this.base64(template) }
上面链接，我忘记了，之前看的，如有侵犯，请联系。
上面两种方法都可以实现点击导出 excal 报表的问题，如果解决了你的困惑的话，就请点个关注吧~
