HTML转成PDF的4个办法介绍（附代码）
在本文中，我将展现怎样运用 Node.js、Puppeteer、headless Chrome 和 Docker 从样式复杂的 React 页面生成 PDF 文档。
配景：几个月前，一个客户请求我们开发一个功能，会员可以得到 PDF 格局的 React 页面内容。该页面根本上是患者病例的汇报和数据可视化效果，其中包括很多 SVG。别的还有一些特别的要求来操作布局，并对 HTML 元素进行一些从新罗列。因而与原始的 React 页面比拟，PDF 中应当有不一样的样式和额外的内容。
因为这个任务比用简略的 CSS 法则解决要复杂得多，所以我们先探究了可能的实现办法。我们寻到了 3 个主要解决方案。这篇博文将引导你理解它们的可能性并终究实施。
在客户端还是办事器端生成？
在客户端和办事器端都可以生成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 = document.getElementById('your-id')
html2canvas(domElement, { onclone: (document) => {
document.getElementById('print-button').style.visibility = 'hidden'
}})
.then((canvas) => {
const img = canvas.toDataURL('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（如上所述）或PDFKit。他们的题目是，要是我想运用这些库，我将不得不从新调整页面构造。这确定会侵害可保护性，由于我需要将所有后续更改利用到 PDF 模板和 React 页面中。
请看下面的代码。你需要亲自手动新建 PDF 文档。你需要遍历 DOM 并寻出每个元素并将其转换为 PDF 格局，这是一项繁琐的工作。必需寻到一个更简略的办法。
doc = new PDFDocument
doc.pipe fs.createWriteStream('output.pdf')
doc.font('fonts/PalatinoBold.ttf')
.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 vector graphics...', 100, 100)
doc.end()这段代码段来自 PDFKit 文档。但是要是你的指标是直接生成一个 PDF 文件，而不是对一个已经存在的（而且一直变化的）HTML 页面进行转换，它还是很实用的。
终究方案3：基于 Node.js 的 Puppeteer 和 Headless Chrome
什么是 Puppeteer？其文档中写道：
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 = await browser.newPage();
await page.goto('https://blog.risingstack.com', {waitUntil: 'networkidle0'});
const pdf = await page.pdf({ format: 'A4' });
await browser.close();
return pdf
})这是一个简略的功能，可导航到 URL 并生成站点的 PD F文件。
第一，我们启动阅读器（仅在 headless 模式下支撑 PDF 生成），然后打开新页面，设定视口，并导航到供给的URL。
设定 waitUntil:'networkidle0' 选项意味着当至少500毫秒没有网络连贯时，Puppeteer 会以为导航已完成。 （可以从 API docs 猎取更多信息。）
之后，我们将 PDF 保留为变量，关闭阅读器并返回 PDF。
注意：page.pdf 办法接收 options 对象，你可以运用 'path' 选项将文件保留到磁盘。要是未供给途径，则 PDF 将不会被保留到磁盘，而是会得到缓冲区。（稍后我将计议怎样处置它。）
要是需要先登录才干从挨维护的页面生成 PDF，第一你要导航到登录页面，检查表单元素的 ID 或名称，填写它们，然后提交表单：
await page.type('#email', process.env.PDF_USER)
await page.type('#password', process.env.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() {
return axios.get(`${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 = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = `your-file-name.pdf`
link.click()
this.closeModal() // close modal
})
.catch(err => /** error handling **/)
}
就这样！要是单击“保留”按钮，那么阅读器将会保留 PDF。
在 Docker 中运用 Puppeteer
我以为这是实施中最棘手的局部 —— 所以让我帮你节俭几个小时的baidu工夫。
官方文档指出“在 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 并不是一个多么高妙的技术，但是你可能会惊叹的发明要在 Firefox 中运用它需要运用变通办法。
除非你是一名经验丰硕的 CSS 巨匠，在新建可打印页面方面有许多的经验，不然这可能会非常耗时。
要是你可以使打印样式表维持简略，打印法则是非常不错用的。
让我们来看一个例子吧。
@media print {
.print-button {
display: none;
}
.content p {
break-after: always;
}
}上面的 CSS 隐蔽了打印按钮，并在每个 p 之后插入一个分页符，其中包括content 类。有一篇很棒的文章总结了你可以用打印法则做什么，以及它们有什么题目，包含阅读器兼容性。
考虑到所有因素，要是你想从不那么复杂的页面生成 PDF，CSS打印法则非常有效。
总结
让我们迅速回忆前面介绍的方案，以便从 HTML 页面生成 PDF 文件：
从 DOM 发生截图：当你需要从页面新建快照时（例如新建缩略图）可能很实用，但是当你需要处置批量数据时就会有些顾此失彼。
只用 PDF 库：要是你打算从头开端以编程方式新建 PDF 文件，这是一个完善的解决方案。不然，你需要同时保护 HTML 和 PDF 模板，这绝对是一个禁忌。
Puppeteer：只管在 Docker 上工作相对艰难，但它为我们的实现供给了最佳的效果，并且编写代码也是最简略的。
CSS打印法则：要是你的会员挨过脚够的教育，晓得怎样把页面内容打印到文件，而且你的页面相对简略，那么它可能是最轻松的解决方案。正如你在我们的案例中所看到的，事实并非如此。
本篇文章到这里就已经全部完毕了，更多其他出色内容可以关注百分百源码网的HTML视频教程栏目！
以上就是HTML转成PDF的4个办法介绍（附代码）的细致内容，更多请关注 百分百源码网 其它相干文章！
