vue 前端导出excel xlsx插件 修改表格行高列宽度
vue 前端导出excel xlsx插件 修改表格行高列宽度
·
cnpm install xlsx --save
import XLSX from "xlsx"; // 列表页引入
// 表格导出
handleExport() {
if (this.tableData.total == 0) {
this.$message.error("暂无数据");
}
this.$confirm(
`确认导出${this.seek.time_date}报表数据,是否继续`,
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
)
.then(() => {
//导出
let table = document.getElementById("exportTable");
let worksheet = XLSX.utils.table_to_sheet(table);
let workbook = XLSX.utils.book_new();
let wscols = [ // 每列不同宽度px
{ wch: 12 },
{ wch: 26 },
{ wch: 12 },
{ wch: 12 },
{ wch: 14 },
{ wch: 12 },
{ wch: 12 },
{ wch: 15 },
];
// workbook.SheetNames[0]获取到到是文件里的到第一个表格
worksheet["!cols"] = wscols;
let wsrows = [{ hpx: 20 }]; // 每行固定高度px
for (let i = 0; i <= this.total; i++) { // total 列表条数
wsrows.push({ hpx: 20 });
}
worksheet["!rows"] = wsrows;
XLSX.utils.book_append_sheet(workbook, worksheet, "sheet");
try {
XLSX.writeFile(workbook, `${this.time_date}报表统计.xlsx`); // time_date 所选日期
} catch (e) {
console.log(e, workbook);
}
})
.catch(() => {});
}
更多推荐
已为社区贡献2条内容
所有评论(0)