HTML转PDF: 使用 html2canvas 和 jspdf.js

要将 HTML 转换为 PDF 文件，可以使用 html2canvas 和 jspdf.js 这两个库。

首先，引入 html2canvas 和 jspdf.js 的脚本文件。可以通过在 HTML 页面中添加以下代码来引入：

<script src='https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js'></script>

接下来，在需要转换为 PDF 的 HTML 元素上，添加一个按钮或其他事件触发器。例如，可以在页面上添加一个按钮来触发转换：

<button id='download'>Download PDF</button>

然后，使用 JavaScript 编写一个事件处理程序，该处理程序在按钮点击时将 HTML 转换为 PDF 并下载。在事件处理程序中，首先使用 html2canvas 库将 HTML 元素转换为 Canvas，然后使用 jspdf.js 将 Canvas 转换为 PDF 文件，最后使用浏览器的下载功能下载该文件。

以下是一个示例的 JavaScript 代码：

document.getElementById('download').addEventListener('click', function() {
  // 将 HTML 元素转换为 Canvas
  html2canvas(document.body).then(function(canvas) {
    // 创建空的 PDF 文档
    var pdf = new jsPDF();

    // 将 Canvas 添加到 PDF 中
    pdf.addImage(canvas.toDataURL('image/jpeg'), 'JPEG', 0, 0);

    // 下载 PDF 文件
    pdf.save('converted.pdf');
  });
});

在上面的代码中，首先通过 getElementById 方法获取到按钮元素，然后使用 addEventListener 方法为按钮添加一个 click 事件处理程序。事件处理程序使用 html2canvas 库将整个 body 元素转换为 Canvas。然后，创建一个新的空 PDF 文档并将 Canvas 添加到 PDF 中。最后，使用 save 方法将 PDF 文件下载到本地。

请注意，上述示例代码中的 html2canvas 和 jspdf.js 的脚本文件链接是 CDN 链接，您也可以将这些文件下载到本地并引入。

希望这可以帮助到您！