html a4页面样式_4个使用将HTML转换为PDF的方法介绍-js教程

怎么将HTML转换为PDF？下面本篇文章将

将展示如何使用 、Puppeteer、headless Chrome 和 Docker 从样式复杂的 React 页面生成 PDF 文档。

有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

背景：几个月前，一个客户要求我们开发一个功能，用户可以得到 PDF 格式的 React 页面内容。该页面基本上是患者病例的报告和数据可视化结果，其中包含许多 SVG。另外还有一些特殊的请求来操纵布局，并对 HTML 元素进行一些重新排列。因此与原始的 React 页面相比，PDF 中应该有不同的样式和额外的内容。

由于这个任务比用简单的 CSS 规则解决要复杂得多，所以我们先探讨了可能的实现方法。我们找到了 3 个主要解决方案。这篇博文将指导你了解它们的可能性并最终实施。

目录：

• 在客户端还是服务器端生成？
• 方案1：从 DOM 制作屏幕截图
• 方案2：仅使用 PDF 库

• 最终方案3：、Puppeteer 和 Headless Chrome

• 在 Docker 中使用 Puppeteer
• 方案3 +1：CSS打印规则
• 总结

在客户端还是服务器端生成？

在客户端和服务器端都可以生成PDF文件。但是让后端处理它可能更有意义，因为你并不想耗尽用户浏览器可以提供的所有资源。

即便如此，我仍然会展示这两种方法的解决方案。

方案1：从 DOM 制作屏幕截图

乍一看，这个解决方案似乎是最简单的，事实证明的确是这样，但它有其自身的局限性。如果你没有特殊需求，例如在 PDF 中选择文本或对文本进行搜索，那么这就是一种简单易用的方法。

此方法简单明了：从页面创建屏幕截图，并把它放到 PDF 文件中。非常直截了当。我们可以使用两个包来实现：

• Html2canvas，根据 DOM 生成截图
• jsPdf，一个生成PDF的库

开始编码：

npm install html2canvas jspdf

import html2canvas from 'html2canvas'
import jsPdf from 'jspdf'
 
function printPDF () {
    const domElement = ('your-id')
    html2canvas(domElement, { onclone: (document) => {