返回

掌握 html2canvas + jsPDF，一文看懂纯前端 HTML 导出 PDF

前端

导语

在当今数字化的世界中，PDF 作为一种通用且广泛使用的文件格式，在各种场景下发挥着重要作用。无论是文档共享、报表生成还是电子签名，PDF 都能提供可靠且安全的解决方案。然而，传统上，生成 PDF 文件通常需要借助专业的软件或工具。如今，得益于前端技术的飞速发展，我们可以使用纯 JavaScript 代码，结合 html2canvas 和 jsPDF 这两个强大的库，在浏览器中实现 HTML 导出 PDF 的功能。

1. 库的安装与配置

1.1 安装 html2canvas

html2canvas 是一个开源的 JavaScript 库，可以将 HTML 元素转换为 Canvas 元素。您可以通过以下步骤安装 html2canvas：

  • 使用 npm 安装：npm install html2canvas
  • 使用 CDN 引用：<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.0.0-rc.5/html2canvas.min.js"></script>

1.2 安装 jsPDF

jsPDF 是一个开源的 JavaScript 库，可以将 Canvas 元素导出为 PDF 文件。您可以通过以下步骤安装 jsPDF：

  • 使用 npm 安装：npm install jspdf
  • 使用 CDN 引用：<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

2. 代码编写

2.1 HTML 准备

首先，您需要准备要导出的 HTML 内容。这可以是任何您想要转换的 HTML 元素，例如表格、图表、文本或图像。

2.2 初始化库

在 HTML 页面中，您需要初始化 html2canvas 和 jsPDF 库。

const html2canvas = require('html2canvas');
const jsPDF = require('jspdf');

2.3 导出 PDF

要将 HTML 元素导出为 PDF，您可以使用以下步骤：

  1. 使用 html2canvas 将 HTML 元素转换为 Canvas 元素：
html2canvas(document.getElementById('html-content')).then((canvas) => {
    // Canvas 元素已生成
});
  1. 使用 jsPDF 将 Canvas 元素导出为 PDF 文件：
const pdf = new jsPDF();
pdf.addImage(canvas.toDataURL('image/jpeg'), 'JPEG', 0, 0, canvas.width, canvas.height);
pdf.save('html-content.pdf');

3. 注意与疑难解答

  • 截取范围： 生成的 PDF 只有页面窗口可见的区域，有滚动条的下面没有生成出来。
  • 层级选择： 如果您截取的是 body 的这个层级，而刚好 body 设置了 overflow 属性，那么您导出的 PDF 将是空白的。

结语

通过本指南，您已经掌握了如何使用 html2canvas 和 jsPDF 库，实现纯前端 HTML 导出 PDF 的功能。这将为您的项目带来更多可能性，例如动态生成报表、创建可打印的文档或在浏览器中提供 PDF 下载功能。希望您能灵活运用这项技术，在开发中创造出更具价值和用户友好的解决方案。