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 **/) } <button onClick={this.savePDF}>Save as PDF</button>
就这样!假如单击“留存”按钮,那么阅读器将会留存 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打印规则:假如你的会员受过足够的教育,知道怎样把页面内容打印到文件,并且你的页面相对简便,那么它大概是最轻松的解决方案。正如你在我们的案例中所看到的,事实并非如此。
本篇文章到这里就已经全部完毕了,更多其他出色内容可以关注PHP中文网的HTML视频教程栏目!
以上就是HTML转成PDF的4个办法介绍(附代码)的具体内容,更多请关注百分百源码网其它相关文章!