Open SiZapPaaiGwat opened 8 years ago
本文主要介绍本人在项目实践中通过SlimerJS将网页输出为PDF文档的过程,生成的PDF文档中的文本是矢量的,可以选择复制。 虽然网上也有一些类似的分享,但是并没有将整个过程中的可能遇到的坑以及在Web开发中的一些技术细节讲述的比较清楚。
SlimerJS
本文使用的操作系统版本为CentOS 7.2。
关于xvfb的介绍可以查看wiki,简单点说它就是用于处理程序中与图形化相关的功能,但是它不会在屏幕上展示任何图形输出。 安装以后可以使用xvfb-run命令来运行headless slimerjs.
yum install xorg-x11-server-Xvfb
SlimerJS依赖于Firefox,目前支持的版本号介于38~ 46,其它版本官方无法保证测试结果。 所以不推荐安装大于46或者小于38的版本。
wget https://ftp.mozilla.org/pub/firefox/releases/46.0.1/linux-x86_64-EME-free/zh-CN/firefox-46.0.1.tar.bz2 tar xjvf firefox-46.0.1.tar.bz2
注意这里我们下载Firefox的版本号为64的EME版本,普通版本在渲染复杂网页时可能会出现莫名的引擎级别错误。
由于Firefox 46依赖于GTK3,所以这里我们需要安装GTK3。 另外如果你的操作系统版本为CentOS 6.x,那么我推荐你放弃安装GTK3,而是直接升级系统。
yum install gtk3-devel
CUPS是由苹果开发的通用Unix打印系统,如果没有安装CUPS,SlimerJS将网页渲染为PDF的时候将会挂起。
yum install cups
wget http://download.slimerjs.org/releases/0.10.0/slimerjs-0.10.0.zip unzip slimerjs-0.10.0.zip
// 这里设置为firefox文件夹下的的firefox可执行文件的路径 export SLIMERJSLAUNCHER=PATH_TO_FIREFOX
cd PATH_TO_SLIMERJS xvfb-run ./slimerjs SCRIPT_PATH HTTP_PAGE_URL OUTPUT_FILENAME
另外如果执行没有正常运行,可以加上—debug参数
xvfb-run ./slimerjs --debug test.js http://www.qq.com/ test.pdf
var page = require('webpage').create() var system = require('system') if (system.args.length !== 3) { console.log('Arguments error: xvfb-run ./slimerjs SCRIPT_PATH HTTP_PAGE_URL OUTPUT_FILENAME') slimer.exit() } else { var url = system.args[1] var renderPath = system.args[2] console.log('Page url is ' + url) console.log('Output path is ' + renderPath) page.paperSize = { // magic number in my project width: '1500px', height: '1038px', shrinkToFit: true, printBGColors: true, printBGImages: true } page.onLoadFinished = function() { console.log('Finish loading page') // 有些时候分页不理想,需要删除一些节点 page.evaluate(function() { var nodes = document.querySelectorAll('.bottom-line') for(var i = 0; i< nodes.length; i += 1) { nodes[i].parentNode.removeChild(nodes[i]) } }) console.log('Start rendering') page.render(renderPath) console.log('Finish rendering') slimer.exit() } console.log('Opening page now ...') page.open(url) }
由于服务部署在Linux服务器上,网页渲染使用的字体与Windows和macOS区别还是很大的,比如Windows的微软雅黑在Linux是无法使用的。 另外在安装字体上也有两种选择,第一是直接安装在服务器上,第二是作为Web Fonts从网页中引入。
早先我们尝试使用PhantomJS来完成此工作,虽然网上有说2.x支持Flex布局,但是我们的实践结果是不支持。SlimerJS在Flex布局上支持的很好,无需任何额外工作。
我们的网页使用了ECharts来进行图表绘制,ECharts底层使用了canvas来绘制图表。 PhantomJS输出的PDF在这方面支持很差,Stacked Column中莫名的出现很多空白间隙。SlimerJS的表现要好得多,不过有些淡虚线比实际要粗一些,色彩也深一些。
如果希望输出的PDF能够支持分页输出(方便分页打印),需要设置paperSize的Height来确定每页pdf的高度。 不过这里也是有坑的,每页PDF高度会有几个像素的差距,导致会多出一个空白页。
渲染PDF的时候,浏览器进入打印模式,如果你没有专门适配样式,输出效果会很差。很多元素的背景颜色/文本颜色/背景图片不会展示出来。 对于PhantomJS,网上有讨论说需要加上如下样式(我本人并未实践过此方案):
@media print { body { /*https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-adjust*/ -webkit-print-color-adjust: exact; } }
对于SlimerJS,虽然paperSize存在相关设置(printBGColors/printBGImages),但是文本颜色似乎无法设置。所以我推荐在编写CSS的时候注意如下细节:
样例代码如下:
.someClassName { background-color:red; color: #FFF; } @media print { .someClassName { background-color:red !important; color: #FFF !important; } }
不要寄希望于输出的PDF与网页中展示效果100%一致,几乎不可能(尤其是网页内容相对比较复杂的时候),最终效果或多或少都会有些瑕疵。
本文主要介绍本人在项目实践中通过
SlimerJS
将网页输出为PDF文档的过程,生成的PDF文档中的文本是矢量的,可以选择复制。 虽然网上也有一些类似的分享,但是并没有将整个过程中的可能遇到的坑以及在Web开发中的一些技术细节讲述的比较清楚。软件清单:
本文使用的操作系统版本为CentOS 7.2。
安装xvfb
关于xvfb的介绍可以查看wiki,简单点说它就是用于处理程序中与图形化相关的功能,但是它不会在屏幕上展示任何图形输出。 安装以后可以使用xvfb-run命令来运行headless slimerjs.
安装Firefox
SlimerJS依赖于Firefox,目前支持的版本号介于38~ 46,其它版本官方无法保证测试结果。 所以不推荐安装大于46或者小于38的版本。
注意这里我们下载Firefox的版本号为64的EME版本,普通版本在渲染复杂网页时可能会出现莫名的引擎级别错误。
安装GTK3
由于Firefox 46依赖于GTK3,所以这里我们需要安装GTK3。 另外如果你的操作系统版本为CentOS 6.x,那么我推荐你放弃安装GTK3,而是直接升级系统。
安装CUPS
CUPS是由苹果开发的通用Unix打印系统,如果没有安装CUPS,SlimerJS将网页渲染为PDF的时候将会挂起。
安装SlimerJS
设置环境变量
开始执行
另外如果执行没有正常运行,可以加上—debug参数
参考代码
字体
由于服务部署在Linux服务器上,网页渲染使用的字体与Windows和macOS区别还是很大的,比如Windows的微软雅黑在Linux是无法使用的。 另外在安装字体上也有两种选择,第一是直接安装在服务器上,第二是作为Web Fonts从网页中引入。
Flex布局
早先我们尝试使用PhantomJS来完成此工作,虽然网上有说2.x支持Flex布局,但是我们的实践结果是不支持。SlimerJS在Flex布局上支持的很好,无需任何额外工作。
Canvas绘制
我们的网页使用了ECharts来进行图表绘制,ECharts底层使用了canvas来绘制图表。 PhantomJS输出的PDF在这方面支持很差,Stacked Column中莫名的出现很多空白间隙。SlimerJS的表现要好得多,不过有些淡虚线比实际要粗一些,色彩也深一些。
文档分页
如果希望输出的PDF能够支持分页输出(方便分页打印),需要设置paperSize的Height来确定每页pdf的高度。 不过这里也是有坑的,每页PDF高度会有几个像素的差距,导致会多出一个空白页。
CSS适配
渲染PDF的时候,浏览器进入打印模式,如果你没有专门适配样式,输出效果会很差。很多元素的背景颜色/文本颜色/背景图片不会展示出来。 对于PhantomJS,网上有讨论说需要加上如下样式(我本人并未实践过此方案):
对于SlimerJS,虽然paperSize存在相关设置(printBGColors/printBGImages),但是文本颜色似乎无法设置。所以我推荐在编写CSS的时候注意如下细节:
样例代码如下:
最后的忠告
不要寄希望于输出的PDF与网页中展示效果100%一致,几乎不可能(尤其是网页内容相对比较复杂的时候),最终效果或多或少都会有些瑕疵。