使用SlimerJS将网页输出为PDF

本文主要介绍本人在项目实践中通过SlimerJS将网页输出为PDF文档的过程,生成的PDF文档中的文本是矢量的,可以选择复制。
虽然网上也有一些类似的分享,但是并没有将整个过程中的可能遇到的坑以及在Web开发中的一些技术细节讲述的比较清楚。

软件清单:

  • xvfb
  • gtk3
  • cups
  • firefox
  • slimerjs

本文使用的操作系统版本为CentOS 7.2。

安装xvfb

关于xvfb的介绍可以查看wiki,简单点说它就是用于处理程序中与图形化相关的功能,但是它不会在屏幕上展示任何图形输出。
安装以后可以使用xvfb-run命令来运行headless slimerjs.

yum install xorg-x11-server-Xvfb

安装Firefox

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版本,普通版本在渲染复杂网页时可能会出现莫名的引擎级别错误。

安装GTK3

由于Firefox 46依赖于GTK3,所以这里我们需要安装GTK3。
另外如果你的操作系统版本为CentOS 6.x,那么我推荐你放弃安装GTK3,而是直接升级系统。

yum install gtk3-devel

安装CUPS

CUPS是由苹果开发的通用Unix打印系统,如果没有安装CUPS,SlimerJS将网页渲染为PDF的时候将会挂起

yum install cups

安装SlimerJS

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从网页中引入。

Flex布局

早先我们尝试使用PhantomJS来完成此工作,虽然网上有说2.x支持Flex布局,但是我们的实践结果是不支持。SlimerJS在Flex布局上支持的很好,无需任何额外工作。

Canvas绘制

我们的网页使用了ECharts来进行图表绘制,ECharts底层使用了canvas来绘制图表。
PhantomJS输出的PDF在这方面支持很差,Stacked Column中莫名的出现很多空白间隙。SlimerJS的表现要好得多,不过有些淡虚线比实际要粗一些,色彩也深一些。

文档分页

如果希望输出的PDF能够支持分页输出(方便分页打印),需要设置paperSize的Height来确定每页pdf的高度。
不过这里也是有坑的,每页PDF高度会有几个像素的差距,导致会多出一个空白页。

CSS适配

渲染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的时候注意如下细节:

  • 将所有背景图片转换为Base64字符串直接在css中引入(幸好有webpack)
  • 所有设置元素文本颜色和背景颜色的样式需要兼容打印模式
  • 文本颜色相关的设置不支持inherited,这点尤其注意

样例代码如下:

.someClassName {
  background-color:red;
  color: #FFF;
}

@media print {
  .someClassName {
    background-color:red !important;
    color: #FFF !important;
  }
}

最后的忠告

不要寄希望于输出的PDF与网页中展示效果100%一致,几乎不可能(尤其是网页内容相对比较复杂的时候),最终效果或多或少都会有些瑕疵。

    原文作者:高梵梵高
    原文地址: https://www.jianshu.com/p/ae65958778c5
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞