把HTML转成PDF的4个⽅案及实现
写在前⾯
在本⽂中，我将展⽰如何使⽤ Node.js、Puppeteer、headless Chrome 和 Docker 从样式复杂的 React 页⾯⽣成 PDF ⽂档。
背景：⼏个⽉前，⼀个客户要求我们开发⼀个功能，⽤户可以得到 PDF 格式的 React 页⾯内容。该页⾯基本上是患者病例的报告和数据可视化结果，其中包含许多 SVG。另外还有⼀些特殊的请求来操纵布局，并对 HTML 元素进⾏⼀些重新排列。因此与原始的 React 页⾯相⽐，PDF 中应该有不同的样式和额外的内容。
由于这个任务⽐⽤简单的 CSS 规则解决要复杂得多，所以我们先探讨了可能的实现⽅法。我们到了 3 个主要解决⽅案。这篇博⽂将指导你了解它们的可能性并最终实施。
在客户端还是服务器端⽣成？
在客户端和服务器端都可以⽣成PDF⽂件。但是让后端处理它可能更有意义，因为你并不想耗尽⽤户浏览器可以提供的所有资源。
即便如此，我仍然会展⽰这两种⽅法的解决⽅案。
⽅案1：从 DOM 制作屏幕截图
乍⼀看，这个解决⽅案似乎是最简单的，事实证明的确是这样，但它有其⾃⾝的局限性。如果你没有特殊需求，例如在 PDF 中选择⽂本或对⽂本进⾏搜索，那么这就是⼀种简单易⽤的⽅法。
此⽅法简单明了：从页⾯创建屏幕截图，并把它放到 PDF ⽂件中。⾮常直截了当。我们可以使⽤两个包来实现：，根据 DOM ⽣成截图
，⼀个⽣成PDF的库
开始编码：
npm install html2canvas jspdf
import html2canvas from 'html2canvas'
import jsPdf from 'jspdf'
function printPDF () {
const domElement = ElementById('your-id')
html2canvas(domElement, { onclone: (document) => {
}})
.then((canvas) => {
const img = DataURL('image/png')
const pdf = new jsPdf()
pdf.addImage(imgData, 'JPEG', 0, 0, width, height)
pdf.save('your-filename.pdf')
})
就这样！
请注意 html2canvas的 onclone⽅法。当你在截图之前需要操纵 DOM（例如隐藏打印按钮）时，它是
⾮常⽅便的。我看到过很多使⽤这个包的项⽬。但不幸的是，这不是我们想要的，因为我们需要在后端完成对 PDF 的创建⼯作。
⽅案2：只使⽤ PDF 库
NPM上有⼏个库，如 jsPDF（如上所述）或。他们的问题是，如果我想使⽤这些库，我将不得不重新调整页⾯结构。这肯定会损害可维护性，因为我需要将所有后续更改应⽤到 PDF 模板和 React 页⾯中。
请看下⾯的代码。你需要亲⾃⼿动创建 PDF ⽂档。你需要遍历 DOM 并出每个元素并将其转换为 PDF 格式，这是⼀项繁琐的⼯作。必须到⼀个更简单的⽅法。
doc = new PDFDocument
doc.ateWriteStream('output.pdf')
doc.font('f')
.fontSize(25)
.text('Some text with an embedded font!', 100, 100)
doc.image('path/to/image.png', {
fit: [250, 300],
align: 'center',
valign: 'center'
});
doc.addPage()
.fontSize(25)
.text('Here is some ', 100, 100)
这段代码段来⾃ PDFKit ⽂档。但是如果你的⽬标是直接⽣成⼀个 PDF ⽂件，⽽不是对⼀个已经存在的（并且不断变化的）HTML 页⾯进⾏转换，它还是很有⽤的。
最终⽅案3：基于 Node.js 的 Puppeteer 和 Headless Chrome
什么是 ？其⽂档中写道：
Puppeteer 是⼀个 Node 库，它提供了⼀个⾼级 API 来控制 DevTools 协议上的 Chrome 或 Chromium。 Puppeteer 默认以headless 模式运⾏ Chrome 或 Chromium，但其也可以被配置为完整的（non-headless）模式运⾏。
它本质上是⼀个可以从 Node.js 运⾏的浏览器。如果你读过它的⽂档，其中⾸先提到的就是你可以⽤ Puppeteer 来⽣成页⾯的截图和PDF。优秀！这正是我们想要的。
先⽤ npmi i puppeteer 安装 Puppeteer，并实现我们的功能。
const puppeteer = require('puppeteer')
async function printPDF() {
const browser = await puppeteer.launch({ headless: true });
const page = wPage();
('blog.risingstack', {waitUntil: 'networkidle0'});
const pdf = await page.pdf({ format: 'A4' });
await browser.close();
return pdf
})
这是⼀个简单的功能，可导航到 URL 并⽣成站点的 PDF⽂件。
⾸先，我们启动浏览器（仅在 headless 模式下⽀持 PDF ⽣成），然后打开新页⾯，设置视⼝，并导航到提供的URL。
设置 waitUntil:'networkidle0' 选项意味着当⾄少500毫秒没有⽹络连接时，Puppeteer 会认为导航已完成。 （可以从  获取更多信息。）之后，我们将 PDF 保存为变量，关闭浏览器并返回 PDF。
注意：page.pdf ⽅法接收 options对象，你可以使⽤ 'path' 选项将⽂件保存到磁盘。如果未提供路径，则 PDF 将不会被保存到磁盘，⽽是会得到缓冲区。（稍后我将讨论如何处理它。）
如果需要先登录才能从受保护的页⾯⽣成 PDF，⾸先你要导航到登录页⾯，检查表单元素的 ID 或名称，填写它们，然后提交表单：
pe('#email', v.PDF_USER)
pe('#password', v.PDF_PASSWORD)
await page.click('#submit')
要始终将登录凭据保存在环境变量中，不要硬编码！
样式控制
Puppeteer 也有这种样式操作的解决⽅案。你可以在⽣成 PDF 之前插⼊样式标记，Puppeteer 将⽣成具有已修改样式的⽂件。await page.addStyleTag({ content: '.nav { display: none} .navbar { border: 0px} #print-button {display: none}' })
将⽂件发送到客户端并保存
好的，现在你已经在后端⽣成了⼀个 PDF ⽂件。接下来做什么？
如上所述，如果你不把⽂件保存到磁盘，将会得到⼀个缓冲区。你只需要把含有适当内容类型的缓冲区发送到前端即可。
printPDF.then(pdf => {
res.set({ 'Content-Type': 'application/pdf', 'Content-Length': pdf.length })
res.send(pdf)
现在，你只需在浏览器向服务器发送请求即可得到⽣成的 PDF。
function getPDF() {
(`${API_URL}/your-pdf-endpoint`, {
responseType: 'arraybuffer',
headers: {
'Accept': 'application/pdf'
}
})
⼀旦发送了请求，缓冲区的内容就应该开始下载了。最后⼀步是将缓冲区数据转换为 PDF ⽂件。
savePDF = () => {
this.openModal(‘Loading…’) // open modal
return getPDF() // API call
.then((response) => {
const blob = new Blob([response.data], {type: 'application/pdf'})
const link = ateElement('a')
link.href = ateObjectURL(blob)
link.download = `your-file-name.pdf`
link.click()
this.closeModal() // close modal
})
.catch(err => /** error handling **/)
}
<button onClick={this.savePDF}>Save as PDF</button>
就这样！如果单击“保存”按钮，那么浏览器将会保存 PDF。
在 Docker 中使⽤ Puppeteer
svg和canvas的区别
我认为这是实施中最棘⼿的部分 —— 所以让我帮你节省⼏个⼩时的百度时间。
官⽅⽂档指出“在 Docker 中使⽤ headless Chrome 并使其运⾏起来可能会⾮常棘⼿”。官⽅⽂档有部分，你可以到有关⽤ Docker
安装 puppeteer 的所有必要信息。
如果你在 Alpine 镜像上安装 Puppeteer，请确保在看到时再向下滚动⼀点。否则你可能会忽略⼀个事实：你⽆法运⾏最新的 Puppeteer 版本，并且你还需要⽤⼀个标记禁⽤ shm ：
const browser = await puppeteer.launch({
headless: true,
args: ['--disable-dev-shm-usage']
});
否则，Puppeteer ⼦进程可能会在正常启动之前耗尽内存。
⽅案 3 + 1：CSS 打印规则
可能有⼈认为从开发⼈员的⾓度来看，简单地使⽤ CSS 打印规则很容易。没有 NPM 模块，只有纯 CSS。但是在跨浏览器兼容性⽅⾯，它的表现如何呢？
在选择 CSS 打印规则时，你必须在每个浏览器中测试结果，以确保它提供的布局是相同的，并且它不是100％能做到这⼀点。
例如，在给定元素后⾯插⼊⼀个 break-after 并不是⼀个多么⾼深的技术，但是你可能会惊讶的发现要需要使⽤变通⽅法。
除⾮你是⼀位经验丰富的 CSS ⼤师，在创建可打印页⾯⽅⾯有很多的经验，否则这可能会⾮常耗时。
如果你可以使打印样式表保持简单，打印规则是很好⽤的。
让我们来看⼀个例⼦吧。
@media print {
.print-button {
display: none;
}
.content div {
break-after: always;
}
}
上⾯的 CSS 隐藏了打印按钮，并在每个 div之后插⼊⼀个分页符，其中包含content类。有⼀篇总结了你可以⽤打印规则做什么，以及它们有什么问题，包括浏览器兼容性。
考虑到所有因素，如果你想从不那么复杂的页⾯⽣成 PDF，CSS打印规则⾮常有效。
总结
让我们快速回顾前⾯介绍的⽅案，以便从 HTML 页⾯⽣成 PDF ⽂件：
从 DOM 产⽣截图：当你需要从页⾯创建快照时（例如创建缩略图）可能很有⽤，但是当你需要处理⼤量数据时就会有些捉襟见肘。
只⽤ PDF 库：如果你打算从头开始以编程⽅式创建 PDF ⽂件，这是⼀个完美的解决⽅案。否则，你需要同时维护 HTML 和 PDF 模板，这绝对是⼀个禁忌。
Puppeteer：尽管在 Docker 上⼯作相对困难，但它为我们的实现提供了最好的结果，⽽且编写代码也是最简单的。
CSS打印规则：如果你的⽤户受过⾜够的教育，知道如何把页⾯内容打印到⽂件，并且你的页⾯相对简单，那么它可能是最轻松的解决⽅案。正如你在我们的案例中所看到的，事实并⾮如此。
打印快乐！
推荐阅读：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。