因产品需求 需要导出excal 并且插入图片，正常来说数据量大的话后端来搞，我这边数据量没有那么大 后端也不想搞，所以.... （测试3k条数据，5s差不多吧 ，主要有个截图的功能，差不多7-15s）、
截图 插件 html2Canvas
导出excal 插件 table-excel
导出excal 的插件地址 github.com/Zheng-Chang… api 写的非常清楚 非常棒 推荐一下，只不过插入图片的api 本人看到没那么明白，查阅文档才写出来 所以记录一下
// https://github.com/Zheng-Changfu/table-exporter#8 插件地址
import {ElMapExportTable} from "table-excel";
export const handleExport = function(data,Base64Image,title) {
const column = [
{
title: "",
dataIndex: "",
children: [
{
title: "呼叫时间", //表头名字
dataIndex: "ed_CrateDate" //数据的kye
},
]
}
];
const instance = new ElMapExportTable({
column,
data,
setRowStyle({ data, columnIndex, rowIndex, type }) {
if (type === "header" && rowIndex === 0 && columnIndex === 0) {
return {
height: 200,
};
}
if (type === "main") {
return {
height: 30,
};
}
},
setWorkSheet: ({ worksheet, sheetIndex }) => {
const img = worksheet.workbook.addImage({
base64: Base64Image,
extension: 'png',
});
//tl 表格开始位置
//ext 格式
//editAs 位置
// 具体参考 https://github.com/exceljs/exceljs/blob/master/README_zh.md#图片
worksheet.addImage(img, {
tl: { col: 0, row: 0 },
ext: { width: 1600, height: 265 },
editAs: 'absolute'
});
},
},
);
instance.download(title + formatDate());
}
function formatDate(){
let date = new Date();
let year = date.getFullYear(); // 年
let month = date.getMonth() + 1; // 月
let day = date.getDate(); // 日
let hour = date.getHours(); // 时
hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
let minute = date.getMinutes(); // 分
minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
let second = date.getSeconds(); // 秒
second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
let nowTime = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
return nowTime
}
Dom 使用
<el-button size="small"
element-loading-text="正在导出请等待..."
element-loading-spinner="el-icon-loading"
v-loading.fullscreen.lock="loading"
@click='Excal'>导出Excel</el-button>
<script>
import {handleExport} from "./exportExcal.js";
import html2Canvas from "html2canvas";
export default {
components: {},
data() {
return {
loading:false,
}
},
mounted() {
},
methods: {
Excal(){
this.loading = true;
setTimeout(()=>{ // 不加定时器 数据量太大 loading 出不来 先让他出来再说
let data = []; //数据源
let title ="" //导出表格名称
html2Canvas(document.getElementById("CreateCanvas")).then(async(canvas)=> {
let Base64Image = canvas.toDataURL("png");
await handleExport(data,Base64Image,title)
this.loading = false;
});
},3000)
}
}
}
</script>
效果如下
