黄金城手机APP
  咨询电话:15388076848

黄金城在线登录网站

使用 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.jsonCOPY . /appUSER rootENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD="TRUE"RUN rm -rf ./node_modules/ && rm -rf ./example/node_modules/ && npm install --production && npm cache clean --forceUSER pptruser# Default to port 80 for node, and 5858 or 9229 for debugARG PORT=19898ENV PORT $PORTEXPOSE $PORT 5858 9229CMD ["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