用html2canvas和jsPDF，我用几行代码把html页面转成pdf文件！

2023-04-05 22:15:43

如何将 HTML 页面转换为 PDF 文件：无需计算机

想象一下，当你需要一份 PDF 文件时，却发现没有电脑，只能用手边的 HTML 页面。不用担心！今天，我们将介绍如何使用 HTML2Canvas 和 jsPDF 将 HTML 页面转换为 PDF 文件，让你即使在没有电脑的情况下也能轻松获得 PDF 文件。

HTML2Canvas：将 HTML 页面转换为画布

HTML2Canvas 是一款功能强大的 JavaScript 函数，可将 HTML 页面转换为画布元素。画布元素就像一块数字画布，可容纳图形和文本。通过将 HTML 页面渲染到画布元素，我们可以捕获页面的布局和内容。

jsPDF：将画布转换为 PDF

jsPDF 是一个 JavaScript 函数库，可将画布元素转换为 PDF 文件。PDF 文件是一种广泛使用的文档格式，可保留文档的布局和格式。使用 jsPDF，我们可以轻松地将画布元素导出为 PDF 文件。

将 HTML 页面转换为 PDF 文件的步骤

使用 HTML2Canvas 和 jsPDF 将 HTML 页面转换为 PDF 文件的步骤如下：

导入 HTML2Canvas 和 jsPDF 函数库： 将这两个函数库的脚本文件包含到你的 HTML 页面中。
创建画布元素： 使用 JavaScript 创建一个画布元素，用作渲染 HTML 页面的目标。
使用 HTML2Canvas 渲染页面： 使用 HTML2Canvas 函数将 HTML 页面渲染到画布元素上。
使用 jsPDF 转换画布： 使用 jsPDF 函数将画布元素转换为 PDF 文件。
保存 PDF 文件： 使用 jsPDF 的 save() 方法将 PDF 文件保存到本地计算机。

示例代码

下面是一个示例代码，演示如何将 HTML 页面转换为 PDF 文件：

<!DOCTYPE html>
<html>
<head>
  <script src="html2canvas.min.js"></script>
  <script src="jspdf.min.js"></script>
</head>
<body>
  <h1>这是一个 HTML 页面</h1>
  <p>这是第一段文字。</p>
  <p>这是第二段文字。</p>
  <button onclick="html2pdf()">转换为 PDF</button>
</body>
</html>

function html2pdf() {
  var element = document.body;
  html2canvas(element).then(function(canvas) {
    var pdf = new jsPDF();
    pdf.addImage(canvas.toDataURL("image/png"), 'JPEG', 0, 0, 210, 297);
    pdf.save("html转pdf.pdf");
  });
}