场景:不用调用后端接口,完全由前端控制导出下载。
一、前提条件
安装 xlsx ,并导入
npm i xlsx
import XLSX from "xlsx";
二、准备表头数据
例如:
tableHeader: [
{ prop: "orderNo", label: "对账单编号", width: "140", align: "center" },
{
prop: "customerName",
label: "客户名称",
width: "230",
align: "center",
},
{
prop: "customerCode",
label: "客户编码",
width: "180",
align: "center",
},
{ prop: "name1", label: "客户资信评级", width: "120", align: "center" },
{
prop: "settleMoneyCount",
label: "结算总额",
width: "160",
align: "center",
},
{
prop: "startTime",
label: "结算开始日期",
width: "170",
align: "center",
formatData: (val) => {
return val.split(" ")[0];
},
},
{
prop: "endTime",
label: "结算结束日期",
width: "170",
align: "center",
formatData: (val) => {
return val.split(" ")[0];
},
},
{
prop: "invoiceStatus",
label: "对账单状态",
width: "140",
align: "center",
formatData: (val) => {
const invoiceStatusFormat = [
{
label: "未开票",
value: "0",
},
{
label: "开票中",
value: "1",
},
{
label: "已开票",
value: "2",
},
];
return invoiceStatusFormat[val].label;
},
},
{
prop: "reconciliationDate",
label: "已完成对账",
width: "140",
align: "center",
},
{ prop: "nam2e", label: "对账责任人", width: "120", align: "center" },
{ prop: "name4", label: "最后操作时间", width: "180", align: "center" },
{
prop: "oper",
label: "操作",
width: "200",
align: "center",
fixed: "right",
},
],
三、核心代码
//点击导出按钮调用该方法
handleExportFuc() {
const data = {
XLSX: XLSX,
tableHeader: this.tableHeader,
formName: "待核销列表",
selectRows: this.rows, //用户选择需要导出的数据 <el-table> @selection-change="handleSelect"
};
exportFuc(data, this);
this.$refs["tableRef"].$refs.multipleTable.clearSelection(); //点击导出后清空用户选择
},
封装导出实现代码
/**
* @param {Object} data
* @param {Array} tableHeader
*/
export function exportFuc(data, val) {
const that = val
if (data.selectRows.length <= 0) {
return that.$message.warning("请选择需要导出的数据");
}
const firstRow = [];
data.tableHeader.forEach((t) => {
if (t.prop !== "oper") {
firstRow.push(t.label);
}
});
const tableData = [firstRow]; // 表格表头
data.selectRows.forEach((item) => {
const rowData = [];
data.tableHeader.forEach((t) => {
if (t.prop !== "oper") {
let value = item[t.prop];
if (t.formatData) {
value = t.formatData(value);
}
rowData.push(value);
}
});
tableData.push(rowData);
});
const ws = data.XLSX.utils.aoa_to_sheet(tableData);
const wb = data.XLSX.utils.book_new();
data.XLSX.utils.book_append_sheet(wb, ws, data.formName); // 工作簿名称
data.XLSX.writeFile(wb, `${data.formName}.xlsx`); // 保存的文件名
}
最后:一般都是让后端做,后端不愿意做,就只能靠自己了。当然你也可以抱着学习的态度去了解一下,对自己也有好处!