前端页面如何将DOM转化为PDF并导出 ,代码示范

87 min read

在前端页面将DOM转化为PDF并导出需要使用第三方库 jsPDF 和 html2canvas。

  1. 首先在 HTML 页面中导入 jsPDF 和 html2canvas。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
  1. 在 JavaScript 中编写代码，先使用 html2canvas 将 DOM 转化为 canvas。
html2canvas(document.querySelector("#pdf"), {
  allowTaint: true,
  useCORS: true,
  scale: 2,
  scrollX: -window.scrollX,
  scrollY: -window.scrollY,
}).then((canvas) => {
  // TODO: 将 canvas 转化为 PDF 并导出
});

其中，document.querySelector("#pdf") 中的 #pdf 是代表需要转化的 DOM 元素的 CSS 选择器，allowTaint: true 和 useCORS: true 是为了解决跨域问题，scale: 2 是为了提高转化的清晰度（可根据具体情况设置），scrollX: -window.scrollX 和 scrollY: -window.scrollY 是为了解决转化后页面位置偏移的问题。

  1. 将 canvas 转化为 PDF 并导出。
const pdf = new jsPDF("p", "pt", "a4");
const imgData = canvas.toDataURL("image/png");
const imgWidth = 210;
const pageHeight = 295;
const imgHeight = (canvas.height * imgWidth) / canvas.width;
let heightLeft = imgHeight;
let position = 0;

pdf.addImage(imgData, "PNG", 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;

while (heightLeft >= 0) {
  position = heightLeft - imgHeight;
  pdf.addPage();
  pdf.addImage(imgData, "PNG", 0, position, imgWidth, imgHeight);
  heightLeft -= pageHeight;
}

pdf.save("test.pdf");

其中，new jsPDF("p", "pt", "a4") 是设置 PDF 的纸张大小和方向，canvas.toDataURL("image/png") 将 canvas 转化为 PNG 格式，pdf.addImage 是将 canvas 图片添加到 PDF 中，pdf.addPage() 是添加新的一页 PDF（如果需要多页），pdf.save("test.pdf") 是导出 PDF 文件（文件名为 test.pdf）。

完整代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Export PDF</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
  </head>
  <body>
    <div id="pdf">
      <h1>Hello, World!</h1>
      <p>This is a test PDF file.</p>
    </div>
    <button onclick="exportPDF()">Export PDF</button>
    <script>
      function exportPDF() {
        html2canvas(document.querySelector("#pdf"), {
          allowTaint: true,
          useCORS: true,
          scale: 2,
          scrollX: -window.scrollX,
          scrollY: -window.scrollY,
        }).then((canvas) => {
          const pdf = new jsPDF("p", "pt", "a4");
          const imgData = canvas.toDataURL("image/png");
          const imgWidth = 210;
          const pageHeight = 295;
          const imgHeight = (canvas.height * imgWidth) / canvas.width;
          let heightLeft = imgHeight;
          let position = 0;

          pdf.addImage(imgData, "PNG", 0, position, imgWidth, imgHeight);
          heightLeft -= pageHeight;

          while (heightLeft >= 0) {
            position = heightLeft - imgHeight;
            pdf.addPage();
            pdf.addImage(imgData, "PNG", 0, position, imgWidth, imgHeight);
            heightLeft -= pageHeight;
          }

          pdf.save("test.pdf");
        });
      }
    </script>
  </body>
</html>