首先下载xlsx和file-saver的依赖
npm install --save xlsx file-saver
在需要的组件引入xlsx和file-saver
import FileSaver from "file-saver";
import XLSX from "xlsx";
第一种:导出整个表格
参考的文件地址:https://www.cnblogs.com/charles8866/p/11303397.html
各位可以这个地址看看,比较详细
给table表格设置一个id
<el-table id="out-table"></el-table>
导出按钮绑定导出的方法
<el-button type="primary" @click="exportExcel">导出</el-button>
在methods中写导出的方法
exportExcel() {
var xlsxParam = { raw: true }
let wb = XLSX.utils.table_to_book(document.querySelector("#out-table"),xlsxParam);
let wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
try {
FileSaver.saveAs(
new Blob([wbout], { type: "application/octet-stream" }),
'导出表格的名字.xlsx'
);
}
catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
}
如果表格使用了固定列fixed属性,会导出两个重复表格,需要改下代码
exportExcel() {
var xlsxParam = { raw: true }
var table = document.querySelector('#out-table').cloneNode(true)
table.removeChild(table.querySelector('.el-table__fixed'))
//通过css选择器获取一个table表格
var wb = XLSX.utils.table_to_book(table, xlsxParam)
let wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
try {
FileSaver.saveAs(
new Blob([wbout], { type: "application/octet-stream" }),
'导出表格的名字.xlsx'
);
}
catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;
}
这种导出并不适用有操作列的表格,导出的表格会有操作这一列
第二种:导出指定列或导出指定行
参考地址:https://blog.csdn.net/qq_36942042/article/details/103367084
此方法除下载xlsx和file-saver的依赖外,另外需要下载script-loader的依赖和Blob.js和Export2Excel.js
下载script-loader的依赖
npm install -D script-loader
Blob.js和Export2Excel.js
链接:https://pan.baidu.com/s/1VVLvHW4syBAUN0chrighGA
提取码:jksk
Export2Excel.js的修改
参考:在src文件夹下创建excel文件夹
页面不需要引入xlsx、file-saver和script-loader
exportHzb() {
let that = this;
require.ensure([], () => {
const { export_json_to_excel } = require('@/excel/Export2Excel');
//使用绝对路径引入Export2Excel.js
const tHeader = ['姓名','性别',]; // 导出的表头名
const filterVal =['name','sax',]; // 导出的表头字段名
const list = that.dataList;
//把table表格绑定的数组赋值给list,如果是多选后导出,把多选后绑定的数组赋值给list
const data = that.formatJson(filterVal, list);
export_json_to_excel(tHeader, data, '导出文件名');
});
},
formatJson (filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]));
},