专栏首页京程一灯用Node.js把HTML转成PDF格式[每日前端夜话0x46]

用Node.js把HTML转成PDF格式[每日前端夜话0x46]

翻译:疯狂的技术宅 原文:https://blog.risingstack.com/pdf-from-html-node-js-puppeteer/

在本文中,我将展示如何使用 Node.js、Puppeteer、headless Chrome 和 Docker 从样式复杂的 React 页面生成 PDF 文档。

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

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

目录:

  • 在客户端还是服务器端生成?
  • 方案1:从 DOM 制作屏幕截图
  • 方案2:仅使用 PDF 库
  • 最终方案3:Node.js、Puppeteer 和 Headless Chrome
    • 样式控制
    • 将文件发送到客户端并保存
  • 在 Docker 中使用 Puppeteer
  • 方案3 +1:CSS打印规则
  • 总结

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

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

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

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

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

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

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

开始编码:

npm install html2canvas jspdf

 1import html2canvas from 'html2canvas'
 2import jsPdf from 'jspdf'
 3
 4function printPDF () {
 5    const domElement = document.getElementById('your-id')
 6    html2canvas(domElement, { onclone: (document) => {
 7      document.getElementById('print-button').style.visibility = 'hidden'
 8}})
 9    .then((canvas) => {
10        const img = canvas.toDataURL('image/png')
11        const pdf = new jsPdf()
12        pdf.addImage(imgData, 'JPEG', 0, 0, width, height)
13        pdf.save('your-filename.pdf')
14})

就这样!

请注意 html2canvasonclone方法。当你在截图之前需要操纵 DOM(例如隐藏打印按钮)时,它是非常方便的。我看到过很多使用这个包的项目。但不幸的是,这不是我们想要的,因为我们需要在后端完成对 PDF 的创建工作。

方案2:只使用 PDF 库

NPM上有几个库,如 jsPDF(如上所述)或PDFKit。他们的问题是,如果我想使用这些库,我将不得不重新调整页面结构。这肯定会损害可维护性,因为我需要将所有后续更改应用到 PDF 模板和 React 页面中。

请看下面的代码。你需要亲自手动创建 PDF 文档。你需要遍历 DOM 并找出每个元素并将其转换为 PDF 格式,这是一项繁琐的工作。必须找到一个更简单的方法。

 1doc = new PDFDocument
 2doc.pipe fs.createWriteStream('output.pdf')
 3doc.font('fonts/PalatinoBold.ttf')
 4   .fontSize(25)
 5   .text('Some text with an embedded font!', 100, 100)
 6
 7doc.image('path/to/image.png', {
 8   fit: [250, 300],
 9   align: 'center',
10   valign: 'center'
11});
12
13doc.addPage()
14   .fontSize(25)
15   .text('Here is some vector graphics...', 100, 100)
16
17doc.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,并实现我们的功能。

 1const puppeteer = require('puppeteer')
 2
 3async function printPDF() {
 4  const browser = await puppeteer.launch({ headless: true });
 5  const page = await browser.newPage();
 6  await page.goto('https://blog.risingstack.com', {waitUntil: 'networkidle0'});
 7  const pdf = await page.pdf({ format: 'A4' });
 8
 9  await browser.close();
10  return pdf
11})

这是一个简单的功能,可导航到 URL 并生成站点的 PD F文件。

首先,我们启动浏览器(仅在 headless 模式下支持 PDF 生成),然后打开新页面,设置视口,并导航到提供的URL。

设置 waitUntil:'networkidle0' 选项意味着当至少500毫秒没有网络连接时,Puppeteer 会认为导航已完成。 (可以从 API docs 获取更多信息。)

之后,我们将 PDF 保存为变量,关闭浏览器并返回 PDF。

注意:page.pdf 方法接收 options 对象,你可以使用 'path' 选项将文件保存到磁盘。如果未提供路径,则 PDF 将不会被保存到磁盘,而是会得到缓冲区。(稍后我将讨论如何处理它。)

如果需要先登录才能从受保护的页面生成 PDF,首先你要导航到登录页面,检查表单元素的 ID 或名称,填写它们,然后提交表单:

1await page.type('#email', process.env.PDF_USER)
2await page.type('#password', process.env.PDF_PASSWORD)
3await page.click('#submit')

要始终将登录凭据保存在环境变量中,不要硬编码!

样式控制

Puppeteer 也有这种样式操作的解决方案。你可以在生成 PDF 之前插入样式标记,Puppeteer 将生成具有已修改样式的文件。

1await page.addStyleTag({ content: '.nav { display: none} .navbar { border: 0px} #print-button {display: none}' })

将文件发送到客户端并保存

好的,现在你已经在后端生成了一个 PDF 文件。接下来做什么?

如上所述,如果你不把文件保存到磁盘,将会得到一个缓冲区。你只需要把含有适当内容类型的缓冲区发送到前端即可。

1printPDF.then(pdf => {
2    res.set({ 'Content-Type': 'application/pdf', 'Content-Length': pdf.length })
3    res.send(pdf)

现在,你只需在浏览器向服务器发送请求即可得到生成的 PDF。

1function getPDF() {
2 return axios.get(`${API_URL}/your-pdf-endpoint`, {
3   responseType: 'arraybuffer',
4   headers: {
5     'Accept': 'application/pdf'
6   }
7 })

一旦发送了请求,缓冲区的内容就应该开始下载了。最后一步是将缓冲区数据转换为 PDF 文件。

 1savePDF = () => {
 2    this.openModal(‘Loading…’) // open modal
 3   return getPDF() // API call
 4     .then((response) => {
 5       const blob = new Blob([response.data], {type: 'application/pdf'})
 6       const link = document.createElement('a')
 7       link.href = window.URL.createObjectURL(blob)
 8       link.download = `your-file-name.pdf`
 9       link.click()
10       this.closeModal() // close modal
11     })
12   .catch(err => /** error handling **/)
13 }
14<button onClick={this.savePDF}>Save as PDF</button>
15

就这样!如果单击“保存”按钮,那么浏览器将会保存 PDF。

在 Docker 中使用 Puppeteer

我认为这是实施中最棘手的部分 —— 所以让我帮你节省几个小时的百度时间。

官方文档指出“在 Docker 中使用 headless Chrome 并使其运行起来可能会非常棘手”。官方文档有疑难解答部分,你可以找到有关用 Docker 安装 puppeteer 的所有必要信息。

如果你在 Alpine 镜像上安装 Puppeteer,请确保在看到页面的这一部分时再向下滚动一点。否则你可能会忽略一个事实:你无法运行最新的 Puppeteer 版本,并且你还需要用一个标记禁用 shm :

1const browser = await puppeteer.launch({
2  headless: true,
3  args: ['--disable-dev-shm-usage']
4});

否则,Puppeteer 子进程可能会在正常启动之前耗尽内存。

方案 3 + 1:CSS 打印规则

可能有人认为从开发人员的角度来看,简单地使用 CSS 打印规则很容易。没有 NPM 模块,只有纯 CSS。但是在跨浏览器兼容性方面,它的表现如何呢?

在选择 CSS 打印规则时,你必须在每个浏览器中测试结果,以确保它提供的布局是相同的,并且它不是100%能做到这一点。

例如,在给定元素后面插入一个 break-after 并不是一个多么高深的技术,但是你可能会惊讶的发现要在 Firefox 中使用它需要使用变通方法。

除非你是一位经验丰富的 CSS 大师,在创建可打印页面方面有很多的经验,否则这可能会非常耗时。

如果你可以使打印样式表保持简单,打印规则是很好用的。

让我们来看一个例子吧。

1@media print {
2    .print-button {
3        display: none;
4    }
5
6    .content div {
7        break-after: always;
8    }
9}

上面的 CSS 隐藏了打印按钮,并在每个 div 之后插入一个分页符,其中包含content 类。有一篇很棒的文章总结了你可以用打印规则做什么,以及它们有什么问题,包括浏览器兼容性。

考虑到所有因素,如果你想从不那么复杂的页面生成 PDF,CSS打印规则非常有效。

总结

让我们快速回顾前面介绍的方案,以便从 HTML 页面生成 PDF 文件:

  • 从 DOM 产生截图:当你需要从页面创建快照时(例如创建缩略图)可能很有用,但是当你需要处理大量数据时就会有些捉襟见肘。
  • 只用 PDF 库:如果你打算从头开始以编程方式创建 PDF 文件,这是一个完美的解决方案。否则,你需要同时维护 HTML 和 PDF 模板,这绝对是一个禁忌。
  • Puppeteer:尽管在 Docker 上工作相对困难,但它为我们的实现提供了最好的结果,而且编写代码也是最简单的。
  • CSS打印规则:如果你的用户受过足够的教育,知道如何把页面内容打印到文件,并且你的页面相对简单,那么它可能是最轻松的解决方案。正如你在我们的案例中所看到的,事实并非如此。

打印快乐!

本文分享自微信公众号 - 前端先锋(jingchengyideng),作者:疯狂的技术宅

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-03-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序商城开发---真机测试有用!!!!

    第一部分(黑色框)是pages是整个里的页面,每添加页面一个页面,都要把路径写在这里:

    疯狂的技术宅
  • 在 10 分钟内实现安全的 React + Docker

    假如你已经构建了一个 React 应用,但是现在需要部署它。应该怎么做?首先,最好选择一个云提供商,因为它们一般成本低而且部署容易。

    疯狂的技术宅
  • 程序员应该知道的13个设计技巧

    我是一个程序员,不是设计师。我没有受过设计师的训练。我也没有读过关于设计的书籍。尽管如此,在数年的开发过程中,我学会了让自己的网站和应用看起来很专业。

    疯狂的技术宅
  • 推荐一款提高效率的工具

    在工作中经常会遇到PDF转Word等可编辑文本情况,相信很多小伙伴用的是文字一个一个打,图片一个一个截的笨办法了。今天小编也和大家一样,准备这样搞,但是篇幅实在...

    我的小碗汤
  • 日常分享|一个格式转换功能比较齐全的在线转换软件

    可能大家都遇见过这样的烦恼事,当看到一个特别有用的英文版的文档想把它复制下来然后进行翻译,但偏偏文档也不是Word格式,而且文档的篇幅又特别的多,简单的使用复制...

    FreeRonin
  • 日常分享||一款免费的在线PDF转换工具

    我们在日常生活中可能多多少少都遇见过这样的事,当我们再完成一项office工作然后要去打印社打印成果的时候,却突然发现用打印社打开的完全不是自己所编辑出的效果,...

    FreeRonin
  • 如何玩转PDF?5款简单好用的PDF工具推荐

    在办公中会经常遇到PDF文件,也需要将PDF文件进行编辑和转换,但是对PDF直接编辑和转换是不行的,为了高效办公就需要借助工具来完成,很多人想问如何玩转PDF?...

    高效办公
  • PDF文件使用指南

    它是公认的分享文档的最佳格式。但是,这种格式的文件,必须用专门的阅读器打开,而且不能编辑,所以对使用者来说,会遇到很多问题。

    ruanyf
  • 如何创建PDF格式文件,这个方法教你快速创建

    很多人接触到的PDF文件,很多都是从网上下载来的,而这些大都是转换来的,因为PDF本身就是比较安全,兼容性比较好,不论是在阅读还是在传输的时候都是比较便捷的,在...

    高效办公
  • PDF如何进行文字编辑?手把手教你操作

    PDF文件是现在很多办公室都会用到的一种文件格式,在办公中随处可见它的身影,虽然PDF格式有很多的优点,如安全性高,排版精美,但是它却是很难进行编辑和修改的,P...

    高效办公

扫码关注云+社区

领取腾讯云代金券