使用 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
})
创建 PDF:
/**
* create pdf with file path return
* @param {String} url a web page url to fetch
* @param {Object}
* @param {Array} cookie A array with cookie Object
* @param {Object} pdfOptions options for puppeteer pdf options, cover the default pdf setting
*/
async function createPdfFile (url, { cookie, pdfOptions = {} }) {
const options = Object.assign({}, defaultPdfOptions, pdfOptions)
const page = await browser.open(url, {
cookie
})
// const filename = path.join(__dirname, '../../static/', getUniqueFilename() + '.pdf')
const filename = shellescape([tmp.tmpNameSync()])
await page.pdf({ path: filename, ...options })
await page.close()
return filename
}
async function queueCreatePdfFile (list = []) {
const result = await queueExecAsyncFunc(createPdfFile, list, { maxLen: MAX_QUEUE_LEN })
return result
}
async function createPdfFileMergedBuffer (list) {
const files = await queueCreatePdfFile(list)
return pdfMerge(files)
.then((buffer) => {
return Promise.all(files.map((file) => {
return new Promise((resolve) => {
fs.unlink(file, resolve)
})
})).then(() => {
return buffer
})
})
}
环境部署
DockerFile
FROM wenlonghuo/puppeteer-pdf-base:1.0.0
# COPY package.json /app/package.json
COPY . /app
USER root
ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD="TRUE"
RUN rm -rf ./node_modules/ && rm -rf ./example/node_modules/ \
&& npm install --production && npm cache clean --force
USER pptruser
# Default to port 80 for node, and 5858 or 9229 for debug
ARG PORT=19898
ENV PORT $PORT
EXPOSE $PORT 5858 9229
CMD ["node", "app/index.js"]
使用已经完成的 docker 进行部署的方法是：
docker run -i -t -p 19898:19898 --restart=always --privileged=true wenlonghuo/puppeteer-pdf
然后服务调用接口即可。如果没有其他服务，也可以前端调用，效果会差很多，比如使用 axios 实现调用接口并下载：
axios.post('/pdf/create/files', {
list: multi.list.split(',').map(item => ({ url: item })),
cookie: multi.cookie,
pdfOptions: multi.pdfOptions
}, {
responseType: 'arraybuffer'
}).then(res => {
createDownload(res.data)
})
function createDownload (text, filename = '导出') {
/* eslint-disable no-undef */
const blob = new Blob([text], { type: 'application/pdf' })
const elink = document.createElement('a')
elink.download = filename + '.pdf'
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href) // 释放URL 对象
document.body.removeChild(elink)
}
这种方式的主要问题在于下载完成文件后才会弹出窗口，会让人感觉很慢，服务中应该使用 stream 方式进行处理
总结
虽然服务搭建好了，但由于公司的服务器没有 root 权限，无法搭建 docker 环境，最后还是白折腾一场，只能搭在自己的 vps 上进行当作小实验了。
服务存在的问题：
- 无流式实现，感觉等待时间有点久
- 多页面导出页脚的统一设置需要提供统一函数
- 部分页面导出后会将文字切割分成两页，是 puppeteer 的问题
- 服务稳定性还有待提高
附：
demo 地址：https://pdf-maker3.eff.red/#/ https://pdf-maker.eff.red/#/
仓库地址：https://github.com/wenlonghuo/puppeteer-pdf
