20201218-node-puppeteer

Puppeteer是一个Node库，它提供了高级API来通过DevTools协议控制Chrome或Chromium 。Puppeteer默认情况下无头运行，但可以配置为运行完整（无头）的Chrome或Chromium。

能做什么

在浏览器中手动执行的大多数操作都可以使用Puppeteer完成！以下是一些入门示例：

• 生成页面的屏幕截图和PDF。
• 爬取SPA（单页应用程序）并生成预渲染的内容（即“ SSR”（服务器端渲染））。
• 自动进行表单提交，UI测试，键盘输入等。
• 创建最新的自动化测试环境。使用最新的JavaScript和浏览器功能，直接在最新版本的Chrome中运行测试。
• 捕获站点的时间线跟踪，以帮助诊断性能问题。
• 测试Chrome扩展程序。

案例：将页面生成PDF

服务端

// 服务端使用koa
// 使用puppeteer将html转为pdf
router.all('/gw/ai/pdf', async (ctx) => {
    const url = ctx.request.body ? ctx.request.body.url : ''
    if (!url) {
        ctx.body = api.error({
            code: 9,
            message: '页面链接为必传项',
            result: null
        })
        return
    }
    const browser = await puppeteer.launch({
        headless: true,
        args: ['--no-sandbox'] // linux系统下需加该参数，否则报错
    });
    const page = await browser.newPage();
    await page.goto(`${url}?t=${new Date().getTime()}`, {waitUntil: 'networkidle2'});
    page.evaluate(() => {
      // 页面执行脚本，隐藏不必要的元素
      document.querySelector("#btns").style.display = 'none'
    })
    // https://github.com/puppeteer/puppeteer/blob/v1.7.0/docs/api.md#pagepdfoptions
    // <Promise<Buffer>> Promise which resolves with PDF buffer.
    // 各种单位尺寸皆可：px、in、cm、mm
    const pdfBuffer = await page.pdf({path: 'gw-ai-pdf.pdf', width: '2105px' , height: '1487px'});
    ctx.set('Content-Type', 'application/octet-stream');
    ctx.body = pdfBuffer
    await browser.close();
})

module.exports = router;

客户端

// 依赖 FileSaver
// 客户端下载文件：
const res = await axios.post('http://*/gw/ai/pdf', {}, {
  headers: { 'Content-Type': 'application/json' },
  responseType: 'arraybuffer' }
)
FileSaver.saveAs(new Blob([new Uint8Array(res.data)]), 'demo.pdf')

其它案例：待补充

拓展姿势

1. 关于字体
   a. 页面加载字体 b. 系统安装字体
2. 关于并发
   Serverless 实战 —— 快速开发一个分布式 Puppeteer 网页截图服务

参考资料

https://github.com/puppeteer/puppeteer