导出pdf,自动分页

 要将导出的 PDF 固定为 A4 纸大小并在超出 A4 长度时进行分页，你需要进行一些修改。以下是修改后的代码：

<template>
  <div id="print-content">
    <!-- 内容包括 div、表单和表格 -->
    ...
  </div>
  <el-button type="primary" @click="exportPDF">导出 PDF</el-button>
</template>

<script>
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';

export default {
  methods: {
    exportPDF() {
      const printContent = document.querySelector('#print-content');
      const filename = 'export.pdf';
      const A4_WIDTH = 210; // A4 纸的宽度（单位：毫米）
      const A4_HEIGHT = 297; // A4 纸的高度（单位：毫米）
      const pdf = new jsPDF('p', 'mm', 'a4'); // 创建 A4 尺寸的 PDF 实例

      const options = {
        background: 'white',
        scale: 2, // 2 表示 Retina 屏幕
        useCORS: true
      };

      let pdfHeight = 0;
      let currentPage = 1;

      function addPage() {
        pdf.addPage();
        currentPage++;
        pdfHeight = 0;
      }

      function generatePDF(canvas) {
        if (pdfHeight + canvas.height &gt; A4_HEIGHT) {
          addPage();
        }

        pdf.addImage(canvas.toDataURL('image/jpeg'), 'JPEG', 0, pdfHeight, A4_WIDTH, 0);
        pdfHeight += canvas.height;
      }

      html2canvas(printContent, options).then(canvas =&gt; {
        generatePDF(canvas);
        const totalHeight = printContent.offsetHeight;
        let scrollHeight = A4_HEIGHT - pdfHeight;

        if (totalHeight &gt; pdfHeight) {
          let page = 2;
          let yOffset = A4_HEIGHT - scrollHeight;

          while (scrollHeight &lt;= totalHeight) {
            printContent.scrollTo(0, yOffset);
            html2canvas(printContent, options).then(canvas =&gt; {
              generatePDF(canvas);
              scrollHeight += A4_HEIGHT;
              yOffset = A4_HEIGHT * page - scrollHeight;
              page++;
            });
          }
        }

        pdf.save(filename);
      });
    }
  }
};
</script>

在修改后的代码中，我们首先定义了 A4 纸的宽度和高度，然后创建了一个 A4 尺寸的 PDF 实例。接着，我们在 generatePDF 函数中判断当前页的高度是否超过 A4 高度，如果超过，则新增一页，并将 pdfHeight 重置为 0。我们使用 addImage 方法将 canvas 添加到 PDF 中，并更新 pdfHeight 的值。然后，我们获取整个打印内容的总高度，并计算出需要滚动的高度 scrollHeight。如果总高度超过当前页面的高度，则继续滚动页面，并使用 html2canvas 生成新的 canvas，并调用 generatePDF 方法将其添加到 PDF 中，直到滚动到超出总高度为止。最后，我们使用 pdf.save 方法保存并下载 PDF 文件。
请注意，由于 html2canvas 在跨域图片的情况下可能会出现问题，以上代码中的 options 使用了 useCORS: true 来解决该问题。如果你的应用中没有涉及跨域图片，可以将 useCORS 设置为 false，即 useCORS: false。