1、安装依赖
npm install --save xlsx file-saver
2、引入插件
<-- 在要导出的页面引入,或者在main中定义全局使用。我这里是在页面中直接引入 -->
import XLSX from "xlsx"
3、导出按钮
<-- 普通的按钮,添加点击事件(避免重复点击) -->
<el-button
type="warning"
plain
size="mini"
@click.stop.prevent="exportData"
>导出</el-button>
4、点击导出按钮触发exportData事件
this.$confirm("确定要导出列表文件?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then(() => {
// getList 调用接口,从后台请求数据
this.getlist();
// this.arr是用后端请求到的数据
this.exportNewList(this.arr);
});
exportNewList(arr) {
let tableData = [];
var tabHandle = []; //导出表头
// this.listItems 是表头数据
this.listItems.forEach((item) => {
tabHandle.push(item.label);
}); //表头数组
arr.forEach((item, index) => {
let rowData = [];
//导出内容的字段
rowData = [
item.USERPHONE,
item.USERNAME,
item.XDTIME,
item.ORDERNUM,
item.GOODSNAME,
item.SHULIANG,
item.DIZHI,
item.STATUS,
item.KUAIDI,
item.KDDANHAO,
];
tableData.push(rowData);
});
console.log(tableData)
var xlsxParam = { raw: true }; //转换成excel时,使用原始的格式
let workSheet = XLSX.utils.json_to_sheet(tableData, xlsxParam);
let bookNew = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(bookNew, workSheet, "订单"); // 工作簿名称
let name = "订单列表.xlsx"; //表格名称
XLSX.writeFile(bookNew, name); // 保存的文件名
},