vue中将elementUI和echarts转成pdf文件

若要将包含 ElementUI 组件数据和多个 ECharts 图表的数据转换为 PDF 文档，可结合 html2canvas、jspdf 以及 dom-to-image 来实现。其中，html2canvas 和 dom-to-image 可将 ECharts 图表转换为图片，jspdf 则用于生成 PDF 文档。对于 ElementUI 组件数据，可直接使用 HTML 内容添加到 PDF 中。

实现思路

1. 准备 HTML 结构：创建包含 ElementUI 组件数据和 ECharts 图表的 HTML 结构。
2. 转换 ECharts 图表为图片：使用 html2canvas 或 dom-to-image 将 ECharts 图表转换为图片。
3. 生成 PDF 文档：使用 jspdf 创建 PDF 文档，先添加 ElementUI 组件数据的 HTML 内容，再添加 ECharts 图表的图片。

代码示例

<template><div><!-- ElementUI 组件数据 --><div id="elementui-data"><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></div><!-- ECharts 图表 --><div id="echarts-charts"><div id="chart1" style="width: 600px; height: 400px;"></div><div id="chart2" style="width: 600px; height: 400px;"></div></div><el-button @click="exportToPDF">导出为 PDF</el-button></div>
</template><script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
import 'element-plus/dist/index.css';
import { ElTable, ElTableColumn, ElButton } from 'element-plus';// ElementUI 表格数据
const tableData = ref([{date: '2023-05-01',name: '张三',address: '北京市朝阳区'},{date: '2023-05-02',name: '李四',address: '上海市浦东新区'}
]);// 初始化 ECharts 图表
onMounted(() => {const chart1Dom = document.getElementById('chart1');const chart1 = echarts.init(chart1Dom);const option1 = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar'}]};chart1.setOption(option1);const chart2Dom = document.getElementById('chart2');const chart2 = echarts.init(chart2Dom);const option2 = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [80, 150, 120, 200, 130, 70, 110],type: 'bar'}]};chart2.setOption(option2);
});// 导出为 PDF
const exportToPDF = async () => {const pdf = new jsPDF();const elementuiData = document.getElementById('elementui-data');const echartsCharts = document.getElementById('echarts-charts');// 添加 ElementUI 数据到 PDFpdf.html(elementuiData, {callback: function (pdf) {// 添加分页pdf.addPage();// 转换 ECharts 图表为图片并添加到 PDFconst convertChartsToImages = async () => {const chartElements = echartsCharts.querySelectorAll('[id^="chart"]');for (const chartElement of chartElements) {const canvas = await html2canvas(chartElement);const imgData = canvas.toDataURL('image/png');const imgProps = pdf.getImageProperties(imgData);const pdfWidth = pdf.internal.pageSize.getWidth();const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;pdf.addImage(imgData, 'PNG', 0, pdf.getCursorPosition().y, pdfWidth, pdfHeight);// 若图片高度超出页面，添加新页面if (pdf.getCursorPosition().y + pdfHeight > pdf.internal.pageSize.height) {pdf.addPage();}}// 保存 PDFpdf.save('mixed_content.pdf');};convertChartsToImages();}});
};
</script>    

代码解释

1. HTML 结构：包含一个 ElementUI 表格和两个 ECharts 图表，以及一个导出按钮。
2. 初始化 ECharts 图表：在 onMounted 钩子中初始化两个 ECharts 图表。
3. 导出为 PDF：
   • 创建 jsPDF 实例。
   • 使用 pdf.html 方法将 ElementUI 数据添加到 PDF 中。
   • 转换 ECharts 图表为图片，并添加到 PDF 中。
   • 若图片高度超出页面，添加新页面。
   • 保存 PDF 文件。

注意事项

• 要确保已安装 element-plus、echarts、html2canvas 和 jspdf 依赖。
• 可根据实际需求调整 ECharts 图表和 ElementUI 组件的配置。