html 转 pdf

使用案例

导出当前页面为 PDF:

导出 PDF

实现方式

当需要实现将 HTML 内容转换为 PDF 文件时，可以结合 html2canvas 库来实现。

html2canvas 可以将 HTML 元素渲染为 Canvas，并将 Canvas 转换为图像格式，进而可以配合其他库实现生成 PDF 文件的功能。

以下是使用 html2canvas 结合 jsPDF 库生成 PDF 文件的一般流程：

1. 安装 html2canvas 和 jsPDF 库

您可以通过 npm 安装这两个库。

npm install html2canvas jspdf --save

2. 编写 JavaScript 代码

在您的项目中编写以下 JavaScript 代码来实现 HTML 转 PDF 的功能。

import html2canvas from "html2canvas";
import jsPDF from "jspdf";

window.convertToPdf = async () => {
  const element = document.querySelector("#pdf-container"); // 目标 DOM 元素
  const canvas = await html2canvas(element, {
    scale: 1.5,
    allowTaint: true,
  }); // 使用 html2canvas 将元素转换为 Canvas
  const pdf = new jsPDF("p", "mm", "a4"); // 创建一个新的 PDF 文档
  const pdfWidth = pdf.internal.pageSize.getWidth(); // 计算 PDF 页面高度
  const pdfHeight = pdf.internal.pageSize.getHeight(); // 计算 PDF 页面宽度
  const imgUrls = getImgParts(canvas, pdfWidth / pdfHeight);
  // 加到PDF的不同页面上
  const n = 10; // PDF 页面边缘的空白区域
  imgUrls.forEach((canvas, index) => {
    const imgData = canvas.toDataURL("image/png");
    index && pdf.addPage(); // 添加新的页面
    pdf.addImage(imgData, "PNG", n, n, pdfWidth - n * 2, pdfHeight - n * 2); // 将子图像添加到PDF中
  });
  pdf.save(document.title + ".pdf"); // 保存PDF文件
};

// 把长图按A4纸比例拆分成多张画布
const getImgParts = (canvas, radio) => {
  const { width, height } = canvas;
  const subHeight = Math.floor(width / radio); // 子画布的高度
  const total = Math.ceil(height / subHeight);
  const list = [];
  for (let i = 0; i < total; i++) {
    const subCanvas = document.createElement("canvas");
    subCanvas.width = width;
    subCanvas.height = subHeight;
    const context = subCanvas.getContext("2d");
    context.drawImage(canvas, 0, -i * subHeight);
    list.push(subCanvas);
  }
  return list;
};

3. 示例 HTML 元素

在 HTML 文件中设置一个要转换为 PDF 的元素。

<div id="pdf-container">
  <!-- 这里是要转换为PDF的内容 -->
</div>

这样，当运行页面上包含以上 JavaScript 代码的脚本时，会将指定 HTML 元素转换为 Canvas，然后再将 Canvas 转换为 PDF 文件并下载。

请注意，使用 html2canvas 和 jsPDF 结合生成 PDF 的方式依赖于浏览器对 Canvas 和 PDF 的支持。在某些情况下，特别是处理复杂样式和排版时，可能会存在一些限制。如果遇到问题，可以尝试调整样式、元素布局等，以使转换过程更顺利。