翻译:疯狂的技术宅
原文: https://blog.risingstack.com/...
本文首发微信公众号:jingchengyideng
欢迎关注,天天都给你推送新鲜的前端技术文章javascript
在本文中,我将展现如何使用 Node.js、Puppeteer、headless Chrome 和 Docker 从样式复杂的 React 页面生成 PDF 文档。css
背景:几个月前,一个客户要求咱们开发一个功能,用户能够获得 PDF 格式的 React 页面内容。该页面基本上是患者病例的报告和数据可视化结果,其中包含许多 SVG。另外还有一些特殊的请求来操纵布局,并对 HTML 元素进行一些从新排列。所以与原始的 React 页面相比,PDF 中应该有不一样的样式和额外的内容。html
因为这个任务比用简单的 CSS 规则解决要复杂得多,因此咱们先探讨了可能的实现方法。咱们找到了 3 个主要解决方案。这篇博文将指导你了解它们的可能性并最终实施。前端
最终方案3:Node.js、Puppeteer 和 Headless Chromejava
在客户端和服务器端均可以生成PDF文件。可是让后端处理它可能更有意义,由于你并不想耗尽用户浏览器能够提供的全部资源。node
即使如此,我仍然会展现这两种方法的解决方案。ios
乍一看,这个解决方案彷佛是最简单的,事实证实的确是这样,但它有其自身的局限性。若是你没有特殊需求,例如在 PDF 中选择文本或对文本进行搜索,那么这就是一种简单易用的方法。git
此方法简单明了:从页面建立屏幕截图,并把它放到 PDF 文件中。很是直截了当。咱们可使用两个包来实现:程序员
开始编码:github
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 的建立工做。
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 页面进行转换,它仍是颇有用的。
什么是 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 **/) } <button onClick={this.savePDF}>Save as PDF</button>
就这样!若是单击“保存”按钮,那么浏览器将会保存 PDF。
我认为这是实施中最棘手的部分 —— 因此让我帮你节省几个小时的百度时间。
官方文档指出“在 Docker 中使用 headless Chrome 并使其运行起来可能会很是棘手”。官方文档有疑难解答部分,你能够找到有关用 Docker 安装 puppeteer 的全部必要信息。
若是你在 Alpine 镜像上安装 Puppeteer,请确保在看到页面的这一部分时再向下滚动一点。不然你可能会忽略一个事实:你没法运行最新的 Puppeteer 版本,而且你还须要用一个标记禁用 shm :
const browser = await puppeteer.launch({ headless: true, args: ['--disable-dev-shm-usage'] });
不然,Puppeteer 子进程可能会在正常启动以前耗尽内存。
可能有人认为从开发人员的角度来看,简单地使用 CSS 打印规则很容易。没有 NPM 模块,只有纯 CSS。可是在跨浏览器兼容性方面,它的表现如何呢?
在选择 CSS 打印规则时,你必须在每一个浏览器中测试结果,以确保它提供的布局是相同的,而且它不是100%能作到这一点。
例如,在给定元素后面插入一个 break-after 并非一个多么高深的技术,可是你可能会惊讶的发现要在 Firefox 中使用它须要使用变通方法。
除非你是一位经验丰富的 CSS 大师,在建立可打印页面方面有不少的经验,不然这可能会很是耗时。
若是你可使打印样式表保持简单,打印规则是很好用的。
让咱们来看一个例子吧。
@media print { .print-button { display: none; } .content div { break-after: always; } }
上面的 CSS 隐藏了打印按钮,并在每一个 div
以后插入一个分页符,其中包含content
类。有一篇很棒的文章总结了你能够用打印规则作什么,以及它们有什么问题,包括浏览器兼容性。
考虑到全部因素,若是你想从不那么复杂的页面生成 PDF,CSS打印规则很是有效。
让咱们快速回顾前面介绍的方案,以便从 HTML 页面生成 PDF 文件:
打印快乐!