1.安装依赖
npm install xlsx --save
npm install file-saver --save
2.引入
import FileSaver from "file-saver";
import XLSX from "xlsx";
3.echarts 里的toolbox写入
toolbox: {
left: 63,
top:10,
feature: {
dataView: {
show: true,
title: '数据视图',
lang: ['数据视图:', '关闭', '导出Excel'], // 按钮
contentToOption: function (opts) {
$('#tableExcel').table2excel({
exclude: '.noExl', //过滤位置的 css 类名, 有class = “noExl” 的行不被导出
filename: '最大需量', // 文件名称
name: 'Excel Document Name.xls',
exclude_img: true,
exclude_links: true,
exclude_inputs: true
})
},
optionToContent: function (opt) {
var axisData = opt.xAxis[0].data //坐标轴
var series = opt.series //折线图的数据
console.log(series);
var tdHeads =
'<td style="margin-top:10px; padding: 0 15px">日期</td>' //表头
var tdBodys = ''
series.forEach(function (item) {
tdHeads += `<td style="padding:5px 15px">${item.name}</td>`
// console.log(item);
})
var table = `<table id='table-content' border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center;"><tbody><tr>${tdHeads} </tr>`
for (var i = 0, l = axisData.length; i < l; i++) {
for (var j = 0; j < series.length; j++) {
if (series[j].data[i] == undefined) {
tdBodys += `<td>${'-'}</td>`
} else {
tdBodys += `<td>${series[j].data[i]}</td>`
}
}
table += `<tr><td style="padding: 0 15px">${axisData[i]}</td>${tdBodys}</tr>`
tdBodys = ''
}
table += '</tbody></table>'
return table
},
contentToOption: function (HTMLDomElement, opt) {
let et = XLSX.utils.table_to_book(
document.getElementById("table-content")
); //此处传入table的DOM节点
let etout = XLSX.write(et, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
FileSaver.saveAs(
new Blob([etout], {
type: "application/octet-stream",
}),
"统计数据.xlsx"
); //trade-publish.xlsx 为导出的文件名
} catch (e) {
// console.log(e, etout);
}
return etout;
},
},
// magicType: { show: true, type: ['line', 'bar'] },
// restore: { show: true },
// saveAsImage: { show: true }
}
},