使用 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

巴特西