背景
项目组有个类似富文本编辑器功能,在IE浏览器下需要支持打印。为解决打印兼容性问题,需要一套根据Html输出PDF的服务。
服务器到期了,看效果的,可以直接clone到本地跑起来看看alexwjj / html-to-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 😉😉😉
如果你想自己重头开始搭建,可以参考: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
大功告成
这个时候基本就没问题了, 后续遇到的问题再更新
最后:IE加载PDF
需要安装下adobe reader