vue 完美导出超长网页为pdf

要在 Vue 中实现导出超长网页为 PDF，可以使用第三方库 jsPDF 和 html2canvas。以下是实现步骤：

1. 安装 jsPDF 和 html2canvas：

npm install jspdf html2canvas --save

2. 在需要导出 PDF 的组件中引入 jsPDF 和 html2canvas：

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

3. 定义一个方法用来导出 PDF：

exportPdf() {
  const pdfName = 'example.pdf'; // 定义导出的 PDF 文件名
  const pdfOptions = {
    orientation: 'p', // 纵向，也可以设置为 'l' 横向
    unit: 'mm', // 毫米
    format: 'a4', // A4 纸
    compress: true, // 压缩
    fontSize: 12, // 字体大小
    lineHeight: 1.2, // 行高
  };
  const pdf = new jsPDF(pdfOptions);
  const pdfWidth = pdf.internal.pageSize.getWidth();
  const pdfHeight = pdf.internal.pageSize.getHeight();
  const element = document.getElementById('pdf-content'); // 获取需要导出的元素
  html2canvas(element, {scale: 1}).then(canvas => {
    const contentWidth = canvas.width;
    const contentHeight = canvas.height;
    const totalPages = Math.ceil(contentHeight / pdfHeight);
    let position = 0;
    for (let i = 0; i < totalPages; i++) {
      pdf.addImage(canvas, 'JPEG', 0, position, pdfWidth, pdfHeight);
      position -= pdfHeight;
      if (i < totalPages - 1) {
        pdf.addPage();
      }
    }
    pdf.save(pdfName);
  });
}

4. 在需要导出的组件中添加一个元素用来包含需要导出的内容，并设置一个 id：

<div id="pdf-content">
  <!-- 需要导出的内容 -->
</div>

5. 在需要导出 PDF 的地方调用 `exportPdf()` 方法即可。

这样就可以在 Vue 中完美导出超长网页为 PDF 了。