一、table表格导出
**简单表格复杂合并表格都支持一键导出**
1、安装依赖：npm install xlsx file-saver -S
2、在需要导出功能的页面组件中引入
import FileSaver from "file-saver";
import XLSX from "xlsx";
3、Dom层，给需要导出的table标签el-table 或者a-table上加一个id：如outTable，对应下面的exportExcel方法中的 document.querySelector(‘#outTable‘)
<a-table
:columns="columns"
:data-source="data"
id="outTable"
:pagination="false"
bordered
:scroll="{ x: 1700, y: 340 }"
>
</a-table>
4、methods里面写方法:
exportExcel() {
var xlsxParam = { raw: true };//转换成excel时，使用原始的格式
var wb = XLSX.utils.table_to_book(document.querySelector("#outTable"),xlsxParam);//outTable为列表id
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
try {
FileSaver.saveAs(
new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
"各储能电站运行收益周报表.xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
return wbout;}
5、导出后的结果
image.png
踩坑记录：如果是fiexd固定列的table 直接用上面的方法会导致加了fiexd的列在表格多绘制一次，如下所示：
image.png
解决方案：此时我们只需找到加了fiexd的列 在导出前去除fiexd或者fiexd为false即可
image.png
columns:[
{
title: "序号",
customRender: function (text, record, index) {
return index + 1;
},
width: 70,
fixed: "left",
align: "center",
},
{
title: "站点名称",
dataIndex: "stationName",
width: 100,
fixed: "left",
align: "center",
},
{
title: "周充电成本（元）",
children: [
{
title: "尖",
dataIndex: "inSharpPrice",
align: "center",
width: 100,
},
......
//此处结构省略
]
由上图和columns结构得知前两列加了 fixed: "left"，我们改造下导出方法如下
exportExcel() {
//有几列这里就改几列
this.columns[0].fixed = false
this.columns[1].fixed = false
setTimeout(() => {
var xlsxParam = { raw: true };//转换成excel时，使用原始的格式
var wb = XLSX.utils.table_to_book(document.querySelector("#outTable"),xlsxParam);//outTable为列表id
var wbout = XLSX.write(wb, {
bookType: "xlsx",
bookSST: true,
type: "array"
});
try {
FileSaver.saveAs(
new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
"各储能电站运行收益周报表.xlsx"
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, wbout);
}
//定位还原
this.columns[0].fixed = "left"
this.columns[1].fixed = "left"
return wbout;}
})
二、echarts导出
1、安装依赖：npm install xlsx --save
2、在需要导出功能的页面组件中引入
import XLSX from "xlsx";
3、重组数据，要导出echarts图表的数据只需要将数据结构重组成以下格式，通过数组导出excel
var data = [
["id", "time", "value"],
[1, "2022-06-07", 666.8],
[2, "2022-06-08", 888.7]
];
const ws= XLSX.utils.aoa_to_sheet(data);
/* generate workbook and add the worksheet */
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
/* save to file */
XLSX.writeFile(wb, 'SheetJS.xlsx');
例子如下：
echarts如图所示：
image.png
接下来我们看下后端返回json结构
image.png
image.png
如图所示我们需要遍历data和pointList拿到时间和每个电池簇对应的value值,做法如下：
plugins文件夹下封装xlsxFile.js
export default {
/**
* xlsx导出
* @param {*} XLSX 核心api
* @param {*} filename 文件名称
* @param {object} data 数据源{key: Array}
*/
xlsxFile(XLSX, filename, data) {
// 创建workbook对象
const wb = XLSX.utils.book_new();
// 将srcData转换为worksheet
for (let key in data) {
const ws = XLSX.utils.aoa_to_sheet(data[key]);
// worksheet 加入workbook
XLSX.utils.book_append_sheet(wb, ws, key);
}
// 导出
XLSX.writeFile(wb, `${filename}.xlsx`);
}
};
页面引入
import * as XLSX from "xlsx";
import exportFile from "@/plugins/xlsxFile";
method：exportExce导出重组数据
exportExcel() {
let th = ["时间"],
max = 0;
// 表头
for (let item of this.chartData) {
th.push(item.deviceName);
if (item.pointList.length > max) max = item.pointList.length;
}
// 内容区
let content = [];
for (let i = 0; i < max; i++) {
let row = [];
for (let item of this.chartData) {
row.push(item.pointList[i].value);
}
row.unshift(this.chartData[0].pointList[i].time);
content.push(row);
}
exportFile.xlsxFile(XLSX, "组电压", {
组电压导出一览: [th, ...content],
});
},
导出结果
image.png
