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 数据到 PDF
  pdf.html(elementuiData, {
    callback: function (pdf) {
      // 添加分页
      pdf.addPage();
      // 转换 ECharts 图表为图片并添加到 PDF
      const 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();
          }
        }
        // 保存 PDF
        pdf.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 组件的配置。