一、背景

给业务出运营报告，需要支持下载成pdf，基于web页面生成pdf

二、调研

生成pdf有多种方法，前后端都可以实现。

1、后端

1）可以用python来生成
2）如果是基于图片生成pdf，可以借用阿里云的OCR识别，自动切割图片生成pdf

2、前端

1）可以借用html2cavas来生成pdf，但有些小图标会有问题
2）可以借用puppeteer来生成。

三、什么是puppeteer

puppeteer是一个nodejs库，提供了一些API可通过devtools协议来控制chromium。英文原义是木偶，像操纵木偶人一样，通过各种api进行操作浏览器，来帮助你执行各种操作。可用于：

生成页面pdf
SSR （抓取 SPA（单页应用）并生成预渲染内容）
UI自动化测试
网站性能测试

四、如何使用

这个不赘述了，官网上一堆文档 https://pptr.dev/

五、在docker中部署puppeteer

什么是docker?

比较熟悉的童鞋可以绕开看下个了。

docker是一个开源的应用容器引擎，基于Go语音。需要清楚镜像Image、容器Container，相当于类与实例的关系。它是一个沙箱环境，进程间隔离，隔离性不如虚拟机，但性能完胜。常用命令：

编写dockerfile。一般命名 Dockerfile
创建镜像。docker build -t 仓库名:版本号
创建容器。docker run -it --name 仓库名:版本号 /bin/bash
进入容器。docker exec -it --name 仓库名:版本号 /bin/bash

这个是在项目中实际遇到的坑。

按照官网中的配置，发现实际并不好用。官网配置为：https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md#running-puppeteer-in-docker

实际用时，由于公司网络限制，很多包无法成功下载。但实操中发现，并不需要那么多包。具体步骤如下：

配置好nodejs环境，创建基础镜像
下载chromium，下载chrome驱动，下载字体包，这步不需要安装。

FROM /centos-nginx-nodejs/centos-nginx-nodejs:v1

RUN rm -rf /etc/yum.repos.d/*

ENV http_proxy=

ENV ftp_proxy=

ENV no_proxy=

ADD chrome.repo /etc/yum.repos.d/

ADD CentOS-Base.repo /etc/yum.repos.d/

RUN  yum install -y google-chrome-stable

RUN yum install -y ipa-gothic-fonts

RUN yum install -y wqy-zenhei-fonts

RUN yum groupinstall -y "fonts"

基于以上生成的镜像，下载puppeteer

ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD true

RUN  npm i puppeteer

在使用时指定chrome

const browser = await puppeteer.launch({ 
    executablePath: 'google-chrome-stable',
    headless: true, 
    args:[ '--no-sandbox']
})//打开浏览器
      const context = await browser.createIncognitoBrowserContext() //开启无痕模式
      const loginPage = await context.newPage() //打开一个空白页
      await loginPage.setViewport({width: 1920, height: 1080})  // 设置视窗
      await this.login(loginPage)

六、效果

微信截图_20220627110232.png

docker 部署 puppeteer