HTML 转 PDF JavaScript – 代码示例

在本篇博客中，我们将了解如何使用 JavaScript 将 HTML 网站转换为 PDF。

我有一个项目需要用 JavaScript 将一些 HTML 代码转换为 PDF 文件。

这是一个非常基础的网站。网站里会有一个放在div元素里的表单，我只需要根据这个div元素生成PDF文件，然后在新的标签页里显示出来。所有操作都在客户端完成，不需要服务器端支持。

这里的主要任务是：

1. 将 PDF 文件生成 HTML 文件。
2. 在新标签页中显示生成的pdf文件。

面向 .NET 开发人员的服务器端选项？

在我们深入探讨 JavaScript 方法之前，我想先分享一下我最近遇到的情况。

由于本项目所有操作都在客户端进行，无需后端服务器，因此 JavaScript 可以胜任。如果您有 .NET 后端可用，则可以使用服务器端生成功能，从而避免下文提到的变通方法。

如果您使用 .NET/C#，IronPDF是一个可以在服务器端处理 HTML 到 PDF 转换的库。IronPDF 可以解决我在本文中即将提到的类似问题：

• CSS 未加载：IronPDF 使用的是 Chrome 的渲染引擎，因此外部 CSS 可以正常工作。
• 文本不可选：IronPDF 在 PDF 中生成的是真实文本，而不是画布图像。
• jsPDF 的对齐问题：完全支持 CSS3 意味着您的 div 元素会保持在正确的位置。

此外，IronPDF 还支持 Java、Python 和 Node.js。如果您已经在使用 JavaScript（例如本教程中提到的），您可以在后端使用 Node.js，从而避免所有客户端的限制。点击此处开始IronPDF 的 30 天免费试用。

现在让我们来看看当需要在客户端进行操作时，如何用 JavaScript 实现这一切。

使用 JavaScript 将 HTML 转换为 PDF

首先，我们来看第一部分。非常简单的HTML转PDF。

通过简单的谷歌搜索，我找到了这个html2pdf库。

正如其文档中所述，“html2pdf.js 使用html2canvas和jsPDF，完全在客户端将任何网页或元素转换为可打印的 PDF 。”

这就是我想要的全部。网上还有很多其他相关的教程。

一切都运行正常，PDF文件也下载成功了。但是PDF文件是空白的。

html2pdf 生成并返回空白或空的 PDF 文件

这有点奇怪。经过一番搜索，发现是版本问题。

使用 0.9.3 版本后问题已解决。

CDN链接：https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js

它打印出了包含所有内容的div元素。

JavaScript 代码：

let element = document.getElementById('div-to-print')

html2pdf().from(element).save();

所以，它保存/下载了pdf文件。

但我不需要它被下载，我需要它在新浏览器标签页中显示。

使用 JavaScript 和 Blob 实现“在新标签页中打开 PDF 而不是下载”功能——在新标签页中打开 PDF，而不是下载。

我们需要从 PDF 文件创建一个新的 blob，并生成一个新的 URL 来显示该文件。阅读此问题后，我了解到可以使用 html2pdf promise API 获取文件，而无需下载。然后，我们可以使用该获取的文件来创建 blob。

就像我们用普通文件做的那样。

const filed = document.querySelector('input[type=file]').files[0];
let file = new Blob([filed], { type: 'application/pdf' });
let fileURL = URL.createObjectURL(file);
window.open(fileURL);

将其与 html2pdf 从 HTML 生成的 pdf 文件一起使用：

async function printHTML() {

let worker = await html2pdf().from(element).toPdf().output('blob').then((data) => {
    console.log(data)
    let fileURL = URL.createObjectURL(data);
    window.open(fileURL);
    })
}

成功了。PDF文件不再下载，而是在新标签页中打开。然后，我用CSS给这个div元素添加了样式。但是出现了一个问题。

html2pdf CSS 不起作用

我为这个div编写的CSS没有加载出来。这些CSS与html2pdf不兼容。

经过一番搜索，我发现 html2css 没有加载外部 CSS。因此，只打印了 HTML，没有打印 CSS。

解决方法是在 HTML 中使用 style 标签编写 CSS，或者使用内联 CSS。此外，还有一些其他方法可以解决这个问题。

终于生成了我需要的PDF文件。不过还有一点需要注意。

html2pdf PDF 文本不可选

PDF 文件中的文本无法选中。虽然这可能不是大多数项目的必要条件，但我需要这个功能。

html2pdf 将 PDF 生成为 canvas 图像。它一直都在使用 html2canvas。所以，PDF 中并没有文本，只是从 HTML 转换而来的 canvas 图像。

我不得不另找一个库。为什么不继续使用我一直以来在底层使用的那个库呢？

jsPDF 被 html2pdf 使用。因此，我尝试使用jsPDF。

doc.fromHTML(document.getElementById("div-to-print"),
     22, // Margins
     17,
     {'width': 400},
     function (a) {
          // doc.save("HTML2PDF.pdf"); // To Save
          let blobPDF = new Blob([doc.output()], { type: 'application/pdf' });
          let blobUrl = URL.createObjectURL(blobPDF);
          window.open(blobUrl);
});

这里一切都很好。

选择在新标签页中打开 PDF 文件，而不是从 jsPDF 下载。

至于在新标签页中打开而不是从 jsPDF 下载 PDF，类似于 html2pdf 的情况，在回调函数中，我们可以传递 doc.output() 来创建 blob。

生成的 PDF 文件是文本格式，而不是图像格式。

一切顺利，我已经添加了CSS。但是。

jsPDF CSS 无法正常工作

原来 jsPDF 不支持 CSS。要让它支持 CSS，需要使用 html2canvas。而 html2pdf 一直以来都是这么做的。

我们可以轻松地在 jsPDF 中传递边距。它也像以前一样支持 HTML 属性。但我需要 CSS 的原因是，我要打印的 div 元素内部有两个 div 元素。其中一个需要垂直和水平居中对齐。

接下来我搜索的是“如何仅使用 HTML 而不使用 CSS 将 div 子元素居中对齐”。

原来 jsPDF 中有一个文本 API，它可以接受多个参数，无需 CSS 即可轻松完成这项工作。

API.text = function(text, x, y, flags, angle, align);

多发几条这样的短信，任务就完成了。

但是，如果我能用 withHTML 函数创建多个 HTML 元素，而不是编写多段文本，那就太好了。结果证明，这确实可行。

通过在添加先前代码块的函数的回调函数中添加另一个 HTML 元素块，就可以实现这一点。

再进行一些计算，并将计算出的值用作边距，就可以实现完美的居中对齐。

let pageHeight = doc.internal.pageSize.height || doc.internal.pageSize.getHeight()
let pageWidth = doc.internal.pageSize.width || doc.internal.pageSize.getWidth()
let recipientBlock = document.querySelector(".div2-block")
let rHeight = recipientBlock.clientHeight
let rWidth = recipientBlock.clientWidth

doc.fromHTML(document.querySelector(".div1-block"),
   22, 17, { 'width': 200, 'height': 200 },
   function (a) {
      doc.fromHTML(document.querySelector(".div2-block"),
          pageWidth / 2 - rWidth / 4,
          pageHeight / 2 - rHeight / 4,
          { 'width': 200, 'height': 200 },
          function (a) {
              let blobPDF = new Blob([doc.output()], { type: 'application/pdf' });
              let blobUrl = URL.createObjectURL(blobPDF);
              window.open(blobUrl);
                });
        });

最后，在项目接近尾声的时候。

最后，还有一件事要做，那就是设置最终PDF文件的宽度和高度。

文档里有写，很容易就能找到。

将高度和宽度作为数组传递，并指定单位。由于某些原因，使用单位“px”（像素）会出现问题，因此改用“pt”。问题解决了。

let doc =new jsPDF({orientation: 'l', unit: 'pt', format: [widthForJsPDF, heightForJsPDF]})

这就是使用 JavaScript 将 HTML 转换为 PDF 的项目完成方式。

我所做的只是谷歌搜索。