使用 puppeteer 创建一个自动化导出 PDF 的服务

最近在基于 RAP2 做内网的一个 API 管理平台，涉及到与外部人员进行协议交换，需要提供 PDF 文档。
在设置完成 CSS 后已经可以使用浏览器的打印功能实现导出 PDF，但全手动，总是觉得不爽，
所以尝试使用了 PUPPETEER 实现 PDF 自动生成。

PUPPETEER 功能介绍

puppeteer 是 chrome 提供的一个无头浏览器，它是替代 phantomjs 的一个替代品，
多用于实现自动化测试。官方仓库地址：https://github.com/GoogleChrome/puppeteer

它和传统的 phantomjs、zombiejs 等主要区别在于：

基于 chromuim，页面渲染完全使用最新浏览器，保证和实际页面完全一致

可进行有头和无头切换，调试更为方便

基本上等同于浏览器控制台的操作，扩展功能强大

它实际上是基于 chromium 实现的一个 Nodejs 引擎，所以想要运行 puppeteer 就必须能够运行 chromium。
对于 centos6 等低版本的系统就无法安装 chromium，就需要考虑使用其他方式。

使用它的主要流程为：启动浏览器 -> 打开tab -> 加载 url -> 加载完成后的操作 -> 关闭页面 -> 关闭浏览器

API 地址是：https://github.com/GoogleChrome/puppeteer/blob/v1.8.0/docs/api.md#

导出服务的实现思路

鉴于公司内部的服务器是 centos6.9，也就意味着无法安装 chromuim，所以想要实现安装就得使用容器技术。

导出服务的要求：

单页面，加载完成后直接导出

多页面，多用于类似页面，加载完成后按照传入顺序导出PDF，并合并成一个 PDF 后返回

以容器技术部署

单页面

实现比较方便，可以在页面加载完成后执行

await page.pdf({path: 'page.pdf'});

各种配置请参考 https://github.com/GoogleChrome/puppeteer/blob/v1.8.0/docs/api.md#pagepdfoptions

多页面

实现思路是类似的，先调用单页面创建并写入 PDF 至临时目录中（不要写入任意目录，在 docker 中未必有权限），
然后合并 PDF 即可。Nodejs 目前没有原生合并 PDF，只能使用现成的库实现。PDFTK 是目前一个首选，nodejs 中也有相关集成的包。
调用方式为：

pdf.merge([file1,file2])

注意： PDFtk 包中创建完成 PDF 会删除临时文件，所以我们单页面创建的也需要最终删除文件，不然到最后你的磁盘会直接爆掉。

部署

使用 docker 创建 image，涉及的依赖有：puppeteer(chromuim)，pdftk，nodejs。

代码实现 puppeteer 封装

为了方便使用，对 puppeteer 进行封装

'use strict' const puppeteer = require('puppeteer') class Browser { constructor (option) { this.option = { args: ['--no-sandbox', '--disable-setuid-sandbox'], ignoreHTTPSErrors: true, executablePath: process.env.CHROME_PUPPETEER_PATH || undefined, dumpio: false, ...option } } async start () { if (!this.browser) { this.browser = await puppeteer.launch(this.option) this.browser.once('disconnected', () => { this.browser = undefined }) } return this.browser } async exit () { if (!this.browser) { return } await this.browser.close() } async open (url, { cookie }) { await this.start() const page = await this.browser.newPage() // 缓存状态下多页面可能不正常 await page.setCacheEnabled(false) if (cookie) { const cookies = Array.isArray(cookie) ? cookie : [cookie] await page.setCookie(...cookies) } await page.goto(url, { waitUntil: 'networkidle0' }) return page } } const browser = new Browser({ headless: true }) // 退出时结束浏览器，防止内存泄漏 process.on('exit', () => { browser.exit() }) module.exports = browser

由于我们要在 docker 镜像中使用，设置 puppeterr 的参数为：--no-sandbox --disable-setuid-sandbox，
这里面的执行路径使用全局的环境变量，主要目的是避免 chromuim 重复下载，导出包的体积过大。

实现请求服务

由于浏览器的特性，GET 请求可下载文件， POST 请求无法下载文件，所以我们单页面以 GET 方式实现，多页面以 POST 方式实现。

router.post('/pdf/create/files', async (ctx, next) => { const { cookie, pdfOptions, list = [] } = ctx.request.body const filename = encodeURIComponent(ctx.request.body.filename || 'collectionofpdf') const queryList = list.map((item) => { const hostname = nodeUrl.parse(item.url).hostname return [ item.url, { cookie: findCookie(ctx, hostname, item.cookie || cookie || '') || [], pdfOptions: item.pdfOptions || pdfOptions } ] }) const pdfBuffer = await createPdfFileMergedBuffer(queryList) ctx.set({ 'Content-Type': 'application/pdf', 'Content-Disposition': `attachment;filename="${filename}.pdf"`, 'Content-Length': `${pdfBuffer.length}` }) ctx.body = pdfBuffer }) router.get('/pdf/create/download', async (ctx, next) => { const { url, cookie, pdfOptions } = ctx.request.query const filename = encodeURIComponent(ctx.request.query.filename || 'newpdf') const hostname = nodeUrl.parse(url).hostname const pdfBuffer = await createPdfBuffer(url, { cookie: findCookie(ctx, hostname, cookie), pdfOptions }) ctx.set({ 'Content-Type': 'application/pdf', 'Content-Disposition': `attachment;filename="${filename}.pdf"`, 'Content-Length': `${pdfBuffer.length}` }) ctx.body = pdfBuffer })