这篇博客介绍了如何在前端使用js-table2excel库将包含图片的表格数据导出为Excel文件。首先，通过npm安装库，然后在需要导出的页面导入并使用该库。导出时，需要定义表格的列结构，包括标题、键和类型（对于图片列，类型设为'image'并指定宽度和高度）。最后，调用table2excel方法，传入列定义、数据列表和文件名即可完成导出。示例代码展示了具体的实现过程。
第一步安装：npm install js-table2excel
第二步引入：在需要导出表格的页面引入 import table2excel from 'js-table2excel'
第三步使用 ：
没有简化有点麻烦要多写几个表格装图片：
exportExcel() {
/** column数据的说明 */
//1.title为column的标题
//2.key为column对应的key
//3.type默认是text，若为图片格式type为image , 并且可以设置图片的宽高
const column = [
{
title: "部门名称",
key: "department_name",
type: "text",
},
{
title: "封闭次数",
key: "toll_gate_closed_frequency",
type: "text",
},
{
title: "最后一次封闭时间",
key: "close_time",
type: "text",
},
{
title: "限行/封闭原因",
key: "tollgate_class_id_name",
type: "text",
},
{
title: "封闭原因图片",
key: "picture10",
type: "image",
width: 279,
height: 107,
}, {
title: "封闭原因图片2",
key: "picture11",
type: "image",
width: 279,
height: 107,
}, {
title: "封闭原因图片3",
key: "picture12",
type: "image",
width: 279,
height: 107,
}, {
title: "封闭原因图片4",
key: "picture13",
type: "image",
width: 279,
height: 107,
}, {
title: "封闭原因图片5",
key: "picture14",
type: "image",
width: 279,
height: 107,
}, {
title: "封闭原因图片6",
key: "picture15",
type: "image",
width: 279,
height: 107,
},
];
//this.newsList是从后端接口中获取数组列表
//第三个参数是表格名
table2excel(column, this.list, "收费站封闭数据表.xls");
},
getList() {
let tempData = this.listQuery;
tempData.department_id = tempData.department_id || -1;
if (tempData.timeArr) {
if (tempData.timeArr[0]) {
tempData.StartTime = this._dateFormat(
tempData.timeArr[0],
"yyyy/MM/dd HH:mm:ss"
);
} else {
delete tempData.StartTime;
}
if (tempData.timeArr[1]) {
tempData.endTime = this._dateFormat(
tempData.timeArr[1],
"yyyy/MM/dd HH:mm:ss"
);
} else {
delete tempData.timeArr;
}
}
this.listLoading = true;
this.$ajax
.post("/api/back/Platform.ashx?par=TollGateClosedReportForm", tempData)
.then((data) => {
console.log(data);
this.total = data.data.total;
const tempData = data.data;
this.list = tempData.rows;
this.list.forEach(i=>{
var imageArr=i.picture1.split(',')
imageArr.forEach((j,ind)=>{
i[`picture1${ind}`]=j
i.picture1=j
})
})
this.listLoading = false;
});
},
扫一扫
765
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
