Egg + Puppeteer 实现Html转PDF

背景

项目组有个类似富文本编辑器功能，在IE浏览器下需要支持打印。为解决打印兼容性问题，需要一套根据Html输出PDF的服务。

so, 想直接看结果的： Html转PDF 在线预览 ???

调研

html转pdf方案有很多，怎么选择也看各位的具体情况

1、chrome浏览器自带

缺点：

• 需要用户自己点击
• 用户需要使用chrome等支持的浏览器
• 打印默认是全局打印

广告：局部打印可以参考我的插件???: vue-iframe-print

npm install vue-iframe-print 在需要打印的DOM上加上v-print即可实现局部打印

2、html2canvas + jsPdf

实现可参考：Javascript 将html转成pdf,下载,支持多页哦（html2canvas 和 jsPDF）

缺点：

• html2canvas插件在IE的兼容性问题
• 清晰度问题
• 分页问题
• 文字图片截断问题

3、node服务端转换

• wkthtmltopdf 坑较多~
• phantomjs 基于webkit的无头浏览器,社区使用的不多，很久没更新了，可以深度了解下
• Puppeteer + Headless Chrome 社区里使用该方案的也比较多

选用Egg + Puppeteer ???

如何你是从零开始的项目，不想自己搭建~那么恭喜你遇到了我。这里我给你准备了现成的 Egg + Puppeteer 实现Html转PDF

如果你想自己重头开始搭建，可以参考：puppeteer 生成pdf，绝对解决你的需求

部署（敲黑板）❗❗❗

当你已经完成了基本功能以后，高高兴兴的以为就剩下最后一步了，那么坑来了~

1、在 Docker 中使用 Puppeteer

官方文档指出“在 Docker 中使用 headless Chrome 并使其运行起来可能会非常棘手”。官方文档有疑难解答部分，你可以找到有关用 Docker 安装 puppeteer 的所有必要信息。

如果你在 Alpine 镜像上安装 Puppeteer，请确保在看到页面的这一部分时再向下滚动一点。否则你可能会忽略一个事实：你无法运行最新的 Puppeteer 版本，并且你还需要用一个标记禁用 shm

const browser = await puppeteer.launch({
 headless: true,
 args: ['--disable-dev-shm-usage']
});

否则，Puppeteer 子进程可能会在正常启动之前耗尽内存。

2、在centOS中部署

第一步：安装chrome

因为是直接使用的Puppeteer包，需要依赖于chrome内核，所以你在启动项目npm install 的时候会一直卡在node install.js这里，因为china网络问题和chrome太大，你很难在服务器上直接部署成功。

puppeteer支持本地chrome安装链接，所以可以手动指定

跳过chrome安装：npm install puppeteer --ignore-scripts

chrome安装具体可参考：阿里云服务器（centos7）的使用（7）一Puppeteer导出PDF的部署和使用

坑出没，warning~

const browser = await puppeteer.launch({
      args: ['--disable-dev-shm-usage', '--no-sandbox'],
      headless:true,
      // linux chrome的默认安装路径
      executablePath:'/opt/google/chrome/chrome'
  });

这里写的puppeteer启动路径executablePath是linux下chrome的安装路径，如果换了本地，不同的系统对应的路径可能都不一样~ 千辛万苦找了一个包，很好用~ npm install carlo

关于carlo，可以去了解下：『Carlo』 一个新的 Electron ?

'use strict';
const puppeteer = require('puppeteer');

const findChrome = require('../../node_modules/carlo/lib/find_chrome');

let browser = null;

module.exports = async () => {
  if (!browser) {
    const findChromePath = await findChrome({});
    // browser = await puppeteer.launch();
    browser = await puppeteer.launch({
      headless: true,
      // chrome的默认安装路径
      executablePath: findChromePath.executablePath,
      args: [
        '--disable-gpu',
        '--disable-dev-shm-usage',
        '--disable-setuid-sandbox',
        '--no-first-run',
        '--no-sandbox',
        '--no-zygote',
        '--single-process',
      ],
    });
  }
  return browser;
};

第二步：部署脚本

虽然egg有自己的进程管理，但是这里还是推荐使用pm2，在项目根目录下

新建 deploy.sh

# 部署脚本
type node
npm install puppeteer --ignore-scripts
npm install
pm2 kill
# 睡眠，避免出现错误：Spawning PM2 daemon with pm2_home
sleep 2
pm2 start pm2.config.json

新建 pm2.config.json

{
  "apps": [
    {
      "name": "html-to-pdf",
      "script": "npm",
      "args": "run start",
      "log_date_format": "YYYY-MM-DD HH:mm:ss",
      "exec_mode": "fork",
      "max_memory_restart": "500M"
    }
  ]
}

一切就绪，启动！！！

在服务器的项目中执行sh deploy.sh, pm2显示启动成功即可

这个时候服务是没问题了，但是其他问题就来了，因为服务器上是没有中文字体库的~所以生成的pdf，中文字体全是乱码

第三步：安装字体

一、安装fontconfig yum -y install fontconfig 这个命令执行完成之后，就可以在/usr/share文件夹里面看到fonts和fontconfig 二、添加中文字体库

• 从window的C:\Windows\Fonts里面字体拷贝一份，或者只选择你需要的
• 在CentOS的/usr/share/fonts新建一个叫chinese的文件夹
• 然后把刚刚拷贝字体放到CentOS的/usr/share/fonts/chinese里面
• 修改chinese目录的权限。chmod -R 775 /usr/share/fonts/chinese
• 接下来需要安装ttmkfdir来搜索目录中所有的字体信息，并汇总生成fonts.scale文件，输入命令yum -y install ttmkfdir
• 执行ttmkfdir命令， ttmkfdir -e /usr/share/X11/fonts/encodings/encodings.dir
• 打开字体配置文件，vi /etc/fonts/fonts.conf，添加下面这一段

<!-- Font directory list -->
<dir>/usr/share/fonts</dir>
<dir>/usr/share/X11/fonts/Type1</dir>
<dir>/usr/share/X11/fonts/TTF</dir>
<dir>/usr/local/share/fonts</dir>
<dir>/usr/local/share/fonts/chinese</dir>
<dir>~/.fonts</dir>

• 刷新内存中的字体缓存，fc-cache
• 看一下现在机器上已经有了刚才添加的字体。fc-list :lang=zh

大功告成

这个时候基本就没问题了, 后续遇到的问题再更新。不想动手的，需要这个功能的，欢迎startEgg + Puppeteer 实现Html转PDF

最后：IE加载PDF

需要安装下adobe reader

参考

• Javascript 将html转成pdf,下载,支持多页哦（html2canvas 和 jsPDF）
• html转PDF文件，完美解决方案——jsPDF,htmltocanvas,pdfmake,wkhtmltopdf,TuesPechkin,snappy
• 利用puppeteer和egg.js实现html2pdf、html2png。
• page.pdf([options])