一、背景
开发工作中,需要实现网页生成 PDF 的功能,生成的 PDF 需上传至服务端,将 PDF 地址作为参数请求外部接口,这个转换过程及转换后的 PDF 不需要在前端展示给用户。
二、技术选型
该功能不需要在前端展示给用户,为节省客户端资源,选择在服务端实现网页生成 PDF 的功能。
1. Puppeteer
Puppeteer 是一个 Node
库,它提供了高级 API
来通过 DevTools
协议控制 Chrome
或 Chromium
。
在浏览器中手动执行的大多数操作都可以使用 Puppeteer
完成,比如:
- 生成页面的屏幕截图和 PDF;
- 爬取
SPA
并生成预渲染的内容(即SSR
); - 自动进行表单提交,UI 测试,键盘输入等;
- 创建最新的自动化测试环境。使用最新的
JavaScript
和浏览器功能,直接在最新版本的Chrome
中运行测试; - 捕获时间线跟踪网站,以帮助诊断性能问题;
- 测试
Chrome
扩展程序。
从上可见,Puppeteer
可以实现在Node
端生成页面的 PDF 功能。
三、实现步骤
1. 安装
进入项目,安装 puppeteer
到本地。
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ cnpm i puppeteer --save
复制代码
需注意的是,安装 puppeteer
时,会下载与 API
一起使用的最新版本的 Chromium
浏览器,有以下方法可以修改默认设置,不下载浏览器:
- 在环境变量中设置
PUPPETEER_SKIP_CHROMIUM_DOWNLOAD
; - 用
puppeteer-core
代替puppeteer
。
puppeteer-core
是 puppeteer
的轻量级版本,默认不下载浏览器,而是启动现有的浏览器或者连接远程浏览器,使用 puppeteer-core
需注意本地有可连接的浏览器,且安装的 puppeteer-core
版本与打算连接的浏览器兼容。连接本地浏览器方法如下:
const browser = await puppeteer.launch({
executablePath: '/path/to/Chrome'
});
复制代码
本项目需要部署至服务端,没有可连接的浏览器,因此选择安装的是 puppeteer
。
2. 启动浏览器
const browser = await puppeteer.launch({
headless: true,
args: ['--no-sandbox', '--font-render-hinting=medium']
})
复制代码
headless
代表无头模式,在后端启动浏览器,前端不会有展示。
小建议:本地调试时,建议设置
headless: false
,可以启动完整版本的浏览器,直接在浏览器窗口查看内容。
3. 打开新页面
生成浏览器后,在浏览器中打开新页面。
const page = await browser.newPage()
复制代码
4. 跳转到指定页面
跳转至要生成 PDF 的页面。
await page.goto(`${baseURL}/article/${id}`, {
timeout: 60000,
waitUntil: 'networkidle2', // networkidle2 会一直等待,直到页面加载后不存在 2 个以上的资源请求,这种状态持续至少 500 ms
})
复制代码
timeout
是最长的加载时间,默认 30s,网页加载时间长的情况下,建议将 timeout
值改大,防止超时报错。
waitUntil
表示页面加载到什么程度可以开始生成 PDF 或其他操作了,当网页需加载的图片资源较多时,建议设置为 networkidle2
,有以下值可选:
- load:当
load
事件触发时; - domcontentloaded: 当
DOMContentLoaded
事件触发时; - networkidle0: 页面加载后不存在 0 个以上的资源请求,这种状态持续至少 500 ms;
- networkidle2: 页面加载后不存在 2 个以上的资源请求,这种状态持续至少 500 ms。
5. 指定路径,生成pdf
上述指定的页面加载完成后,将该页面生成 PDF。
const ext = '.pdf'
const key = randomFilename(title, ext)
const _path = path.resolve(config.uploadDir, key)
await page.pdf({ path: _path, format: 'a4' })
复制代码
path
表示将 PDF 保存到的文件路径,如果未提供路径,PDF 将不会保存至磁盘。
小建议:不管 PDF 是不是需要保存到本地,建议在调试的时候都设置一个path,方便查看生成的 PDF 的样式,检查是否有问题。
format
表示 PDF 的纸张格式,a4 尺寸为 8.27 英寸 x 11.7 英寸,是传统的打印尺寸。
注意:目前仅支持headless: true 无头模式下生成 PDF
6. 关闭浏览器
所有操作完成后,关闭浏览器,节约性能。
await browser.close()
复制代码
四、难点
1. 图片懒加载
由于需生成 PDF 的页面是文章类型的页面,包含大量图片,且图片引入了懒加载,导致生成的 PDF 会带有很多懒加载兜底图,效果如下图:
解决方法是跳转到页面后,将页面滚动到底部,所有图片资源都会得到请求,waitUntil
设置为 networkidle2
,图片就能加载成功了。
await autoScroll(page) // 因为文章图片引入了懒加载,所以需要把页面滑动到最底部,保证所有图片都加载出来