vue3+ElementUI html 导出Pdf

在Vue 3中使用ElementUI和html2canvas导出PDF的基本步骤如下：

1. 安装依赖：

npm install html2canvas jspdf

2. 在Vue组件中导入库：

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

3. 创建一个方法来处理PDF的导出：

export default {
  methods: {
    async exportPDF() {
      const element = this.$refs.contentToExport; // 需要导出的HTML元素的引用
      const canvas = await html2canvas(element);
      const imgData = canvas.toDataURL('image/png');
      const doc = new jsPDF({
        orientation: 'portrait',
        unit: 'px',
        format: 'a4',
      });
      const imgProps= doc.getImageProperties(imgData);
      const pdfWidth = doc.internal.pageSize.getWidth();
      const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
      doc.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
      doc.save('download.pdf');
    }
  }
}

4. 在模板中，添加一个按钮来触发导出：

<template>
  <div>
    <div ref="contentToExport">
      <!-- 这里是你想要导出的内容 -->
    </div>
    <el-button @click="exportPDF">导出PDF</el-button>
  </div>
</template>

确保你的HTML内容有一个ref属性，这样方法就可以找到并且html2canvas可以将其转换为canvas。这个方法在点击按钮时被触发，并将指定元素的内容导出为PDF。