导出pdf,自动分页

最新推荐文章于 2024-09-04 11:29:32 发布

SKMA

最新推荐文章于 2024-09-04 11:29:32 发布

阅读量1.5k

点赞数 2

文章标签： pdf javascript 前端 vue.js

本文链接：https://blog.csdn.net/Sk22582/article/details/131222071

版权

这段代码展示了如何使用jsPDF和html2canvas库将网页内容转换为固定A4纸大小的PDF，并在内容超出页面时自动分页。关键步骤包括设置A4尺寸，创建PDF实例，判断并添加新页，以及处理跨域图片的策略。

摘要由CSDN通过智能技术生成

要将导出的 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。