方法一、 el-table数据导出为长图片

将el-table数据导出为图片不是一个直接的功能，但可以通过以下步骤实现：

1. 使用html2canvas库将表格区域转换为画布(canvas)。

2. 使用canvas的toDataURL方法将画布导出为图片格式（例如PNG）。

3. 创建一个图片元素并将其源设置为导出的图片数据。

4. 下载这个图片。

此方法可能会出现截图不完整情况，可以尝试使用方法二

实现过程

1. 安装html2canvas

npm install html2canvas

2. 完整代码

<template><div><el-button @click="exportTable">导出表格为图片</el-button><el-tableref="table":data="tableData"style="width: 100%"><!-- 你的表格列 --></el-table></div>
</template><script>
import html2canvas from 'html2canvas';export default {data() {return {tableData: [// 你的表格数据]};},methods: {exportTable() {const table = this.$refs.table.$el; // 获取表格DOM元素html2canvas(table).then((canvas) => {// 将canvas转换为图片const imgData = canvas.toDataURL('image/png');// 创建一个图片元素并设置图片数据const img = new Image();img.src = imgData;img.style.width = '100%';img.style.height = 'auto';// 添加到DOM中以便查看//document.body.appendChild(img);// 下载图片const downloadLink = document.createElement('a');downloadLink.href = imgData;downloadLink.download = 'table.png';downloadLink.click();});}}
};
</script>

方法二、el-table数据导出为长图片

关键点在于高度属性

<template><div><el-button @click="exportTable">导出表格为图片</el-button><div id="table"><el-table :data="tableData" style="width: 100%"><!-- 你的表格列 --></el-table></div></div>
</template><script>
import html2canvas from 'html2canvas';export default {data() {return {tableData: [// 你的表格数据]};},methods: {exportTable() {html2canvas(document.getElementById('table'), {backgroundColor: 'white',useCORS: true, //支持图片跨域scale: 1, //设置放大的倍数height: document.getElementById('table').scrollHeight,windowHeight: document.getElementById('table').scrollHeight}).then((canvas) => {// 生成图片导出const a = document.createElement('a');a.href = canvas.toDataURL('image/png');a.download = this.title;a.click();})}}
};
</script>