本文主要介紹本人在項(xiàng)目實(shí)踐中通過(guò)SlimerJS將網(wǎng)頁(yè)輸出為PDF文檔的過(guò)程，生成的PDF文檔中的文本是矢量的，可以選擇復(fù)制。
雖然網(wǎng)上也有一些類似的分享，但是并沒(méi)有將整個(gè)過(guò)程中的可能遇到的坑以及在Web開(kāi)發(fā)中的一些技術(shù)細(xì)節(jié)講述的比較清楚。
軟件清單：
- xvfb
- gtk3
- cups
- firefox
- slimerjs
本文使用的操作系統(tǒng)版本為CentOS 7.2。
安裝xvfb
關(guān)于xvfb的介紹可以查看wiki，簡(jiǎn)單點(diǎn)說(shuō)它就是用于處理程序中與圖形化相關(guān)的功能，但是它不會(huì)在屏幕上展示任何圖形輸出。
安裝以后可以使用xvfb-run命令來(lái)運(yùn)行headless slimerjs.
yum install xorg-x11-server-Xvfb
安裝Firefox
SlimerJS依賴于Firefox，目前支持的版本號(hào)介于38~ 46，其它版本官方無(wú)法保證測(cè)試結(jié)果。
所以不推薦安裝大于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的版本號(hào)為64的EME版本，普通版本在渲染復(fù)雜網(wǎng)頁(yè)時(shí)可能會(huì)出現(xiàn)莫名的引擎級(jí)別錯(cuò)誤。
安裝GTK3
由于Firefox 46依賴于GTK3，所以這里我們需要安裝GTK3。
另外如果你的操作系統(tǒng)版本為CentOS 6.x，那么我推薦你放棄安裝GTK3，而是直接升級(jí)系統(tǒng)。
yum install gtk3-devel
安裝CUPS
CUPS是由蘋(píng)果開(kāi)發(fā)的通用Unix打印系統(tǒng)，如果沒(méi)有安裝CUPS，SlimerJS將網(wǎng)頁(yè)渲染為PDF的時(shí)候?qū)?huì)掛起。
yum install cups
安裝SlimerJS
wget http://download.slimerjs.org/releases/0.10.0/slimerjs-0.10.0.zip
unzip slimerjs-0.10.0.zip
設(shè)置環(huán)境變量
// 這里設(shè)置為firefox文件夾下的的firefox可執(zhí)行文件的路徑
export SLIMERJSLAUNCHER=PATH_TO_FIREFOX
開(kāi)始執(zhí)行
cd PATH_TO_SLIMERJS
xvfb-run ./slimerjs SCRIPT_PATH HTTP_PAGE_URL OUTPUT_FILENAME
另外如果執(zhí)行沒(méi)有正常運(yùn)行，可以加上—debug參數(shù)
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')
// 有些時(shí)候分頁(yè)不理想，需要?jiǎng)h除一些節(jié)點(diǎn)
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)
}
字體
由于服務(wù)部署在Linux服務(wù)器上，網(wǎng)頁(yè)渲染使用的字體與Windows和macOS區(qū)別還是很大的，比如Windows的微軟雅黑在Linux是無(wú)法使用的。
另外在安裝字體上也有兩種選擇，第一是直接安裝在服務(wù)器上，第二是作為Web Fonts從網(wǎng)頁(yè)中引入。
Flex布局
早先我們嘗試使用PhantomJS來(lái)完成此工作，雖然網(wǎng)上有說(shuō)2.x支持Flex布局，但是我們的實(shí)踐結(jié)果是不支持。SlimerJS在Flex布局上支持的很好，無(wú)需任何額外工作。
Canvas繪制
我們的網(wǎng)頁(yè)使用了ECharts來(lái)進(jìn)行圖表繪制，ECharts底層使用了canvas來(lái)繪制圖表。
PhantomJS輸出的PDF在這方面支持很差，Stacked Column中莫名的出現(xiàn)很多空白間隙。SlimerJS的表現(xiàn)要好得多，不過(guò)有些淡虛線比實(shí)際要粗一些，色彩也深一些。
文檔分頁(yè)
如果希望輸出的PDF能夠支持分頁(yè)輸出（方便分頁(yè)打印），需要設(shè)置paperSize的Height來(lái)確定每頁(yè)pdf的高度。
不過(guò)這里也是有坑的，每頁(yè)P(yáng)DF高度會(huì)有幾個(gè)像素的差距，導(dǎo)致會(huì)多出一個(gè)空白頁(yè)。
CSS適配
渲染PDF的時(shí)候，瀏覽器進(jìn)入打印模式，如果你沒(méi)有專門(mén)適配樣式，輸出效果會(huì)很差。很多元素的背景顏色/文本顏色/背景圖片不會(huì)展示出來(lái)。
對(duì)于PhantomJS，網(wǎng)上有討論說(shuō)需要加上如下樣式（我本人并未實(shí)踐過(guò)此方案）：
@media print {
body {
/*https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-adjust*/
-webkit-print-color-adjust: exact;
}
}
對(duì)于SlimerJS，雖然paperSize存在相關(guān)設(shè)置（printBGColors/printBGImages），但是文本顏色似乎無(wú)法設(shè)置。所以我推薦在編寫(xiě)CSS的時(shí)候注意如下細(xì)節(jié)：
- 將所有背景圖片轉(zhuǎn)換為Base64字符串直接在css中引入（幸好有webpack）
- 所有設(shè)置元素文本顏色和背景顏色的樣式需要兼容打印模式
- 文本顏色相關(guān)的設(shè)置不支持inherited，這點(diǎn)尤其注意
樣例代碼如下：
.someClassName {
background-color:red;
color: #FFF;
}
@media print {
.someClassName {
background-color:red !important;
color: #FFF !important;
}
}
最后的忠告
不要寄希望于輸出的PDF與網(wǎng)頁(yè)中展示效果100%一致，幾乎不可能（尤其是網(wǎng)頁(yè)內(nèi)容相對(duì)比較復(fù)雜的時(shí)候），最終效果或多或少都會(huì)有些瑕疵。
