--- # 主题列表：juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black # 贡献主题：https://github.com/xitu/juejin-markdown-themes theme: juejin highlight: --- ## 背景项目组有个类似富文本编辑器功能，在IE浏览器下需要支持打印。为解决打印兼容性问题，需要一套根据Html输出PDF的服务。服务器到期了，看效果的，可以直接clone到本地跑起来看看[alexwjj / html-to-pdf](https://github.com/alexwjj/html-to-pdf) 😎😎😎 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9607e896eb44411e8c335df98762586d~tplv-k3u1fbpfcp-watermark.image) ## 调研 html转pdf方案有很多，怎么选择也看各位的具体情况 ### 1、chrome浏览器自带 ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a79c4d31f122416ab0e6046be3da88a8~tplv-k3u1fbpfcp-watermark.image) #### 缺点： - 需要用户自己点击 - 用户需要使用chrome等支持的浏览器 - 打印默认是全局打印 ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/de59bb0fb31c48608b2d32f0f6aea9f6~tplv-k3u1fbpfcp-watermark.image) **广告**：局部打印可以参考我的插件😝😝😝: [vue-iframe-print](https://github.com/alexwjj/vue-iframe-print) `npm install vue-iframe-print` 在需要打印的DOM上加上`v-print`即可实现局部打印 ### 2、html2canvas + jsPdf 实现可参考：[Javascript 将html转成pdf,下载,支持多页哦（html2canvas 和 jsPDF）](https://segmentfault.com/a/1190000009211079) #### 缺点： - html2canvas插件在IE的兼容性问题 - 清晰度问题 - 分页问题 - 文字图片截断问题 ### 3、node服务端转换 - [wkthtmltopdf](https://wkhtmltopdf.org/) 坑较多~ - [phantomjs](http://amirraminfar.com/phantomjs-node/#/) 基于webkit的无头浏览器,社区使用的不多，很久没更新了，可以深度了解下 - [Puppeteer](https://zhaoqize.github.io/puppeteer-api-zh_CN/) + Headless Chrome 社区里使用该方案的也比较多 ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/96cd59cc46834b22a7b3c3dd2ba864c7~tplv-k3u1fbpfcp-watermark.image) ## 选用Egg + Puppeteer 😉😉😉 如果你想自己重头开始搭建，可以参考：[puppeteer 生成pdf，绝对解决你的需求](https://blog.csdn.net/zhai_865327/article/details/104792646) ## 部署（敲黑板）❗❗❗ 当你已经完成了基本功能以后，高高兴兴的以为就剩下最后一步了，那么坑来了~ ### 1、在 Docker 中使用 Puppeteer 官方文档指出“在 Docker 中使用 headless Chrome 并使其运行起来可能会非常棘手”。官方文档有[疑难解答部分](https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md#running-puppeteer-in-docker)，你可以找到有关用 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的部署和使用](https://blog.csdn.net/Zeng__Yi/article/details/105661354) #### 坑出没，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 ?](https://zhuanlan.zhihu.com/p/48319397) ``` '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，中文字体全是乱码 ![](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1eecfaf7894f4666b1399d3320832291~tplv-k3u1fbpfcp-watermark.image) ### 第三步：安装字体一、安装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`，添加下面这一段 ``` /usr/share/fonts /usr/share/X11/fonts/Type1 /usr/share/X11/fonts/TTF /usr/local/share/fonts /usr/local/share/fonts/chinese ~/.fonts ``` - 刷新内存中的字体缓存，fc-cache - 看一下现在机器上已经有了刚才添加的字体。fc-list :lang=zh ## 大功告成这个时候基本就没问题了, 后续遇到的问题再更新 ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/967055123abf44c794f39a474474e041~tplv-k3u1fbpfcp-watermark.image) ## 最后：IE加载PDF 需要安装下adobe reader ![](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c649e383990e4f3787516bbba6a8f44f~tplv-k3u1fbpfcp-watermark.image) ## 参考 - [Javascript 将html转成pdf,下载,支持多页哦（html2canvas 和 jsPDF）](https://segmentfault.com/a/1190000009211079) - [html转PDF文件，完美解决方案——jsPDF,htmltocanvas,pdfmake,wkhtmltopdf,TuesPechkin,snappy](https://juejin.cn/post/6844903612993241101) - [利用puppeteer和egg.js实现html2pdf、html2png。](https://zhuanlan.zhihu.com/p/158204817) - [page.pdf([options])](https://zhaoqize.github.io/puppeteer-api-zh_CN/#?product=Puppeteer&version=v5.5.0&show=api-pagepdfoptions) ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dec3b75bd7a24e4bbbc89040d69ec311~tplv-k3u1fbpfcp-watermark.image)