使用SlimerJS將網(wǎng)頁輸出為PDF

時間：2023-05-24 01:06:02 | 來源：網(wǎng)站運營

時間：2023-05-24 01:06:02 來源：網(wǎng)站運營

使用SlimerJS將網(wǎng)頁輸出為PDF：本文主要介紹本人在項目實踐中通過SlimerJS將網(wǎng)頁輸出為PDF文檔的過程，生成的PDF文檔中的文本是矢量的，可以選擇復制。雖然網(wǎng)上也有一些類似的分享，但是并沒有將整個過程中的可能遇到的坑以及在Web開發(fā)中的一些技術(shù)細節(jié)講述的比較清楚。

軟件清單：

• xvfb
• gtk3
• cups
• firefox
• slimerjs

本文使用的操作系統(tǒng)版本為CentOS 7.2。

安裝xvfb

關(guān)于xvfb的介紹可以查看wiki，簡單點說它就是用于處理程序中與圖形化相關(guān)的功能，但是它不會在屏幕上展示任何圖形輸出。安裝以后可以使用xvfb-run命令來運行headless slimerjs.

yum install xorg-x11-server-Xvfb

安裝Firefox

SlimerJS依賴于Firefox，目前支持的版本號介于38~ 46，其它版本官方無法保證測試結(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.bz2tar xjvf firefox-46.0.1.tar.bz2注意這里我們下載Firefox的版本號為64的EME版本，普通版本在渲染復雜網(wǎng)頁時可能會出現(xiàn)莫名的引擎級別錯誤。

安裝GTK3

由于Firefox 46依賴于GTK3，所以這里我們需要安裝GTK3。另外如果你的操作系統(tǒng)版本為CentOS 6.x，那么我推薦你放棄安裝GTK3，而是直接升級系統(tǒng)。

yum install gtk3-devel

安裝CUPS

CUPS是由蘋果開發(fā)的通用Unix打印系統(tǒng)，如果沒有安裝CUPS，SlimerJS將網(wǎng)頁渲染為PDF的時候?qū)炱稹?br>
yum install cups

安裝SlimerJS

wget http://download.slimerjs.org/releases/0.10.0/slimerjs-0.10.0.zipunzip slimerjs-0.10.0.zip

設(shè)置環(huán)境變量

// 這里設(shè)置為firefox文件夾下的的firefox可執(zhí)行文件的路徑export SLIMERJSLAUNCHER=PATH_TO_FIREFOX

開始執(zhí)行

cd PATH_TO_SLIMERJSxvfb-run ./slimerjs SCRIPT_PATH HTTP_PAGE_URL OUTPUT_FILENAME另外如果執(zhí)行沒有正常運行，可以加上—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') // 有些時候分頁不理想，需要刪除一些節(jié)點 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服務器上，網(wǎng)頁渲染使用的字體與Windows和macOS區(qū)別還是很大的，比如Windows的微軟雅黑在Linux是無法使用的。另外在安裝字體上也有兩種選擇，第一是直接安裝在服務器上，第二是作為Web Fonts從網(wǎng)頁中引入。

Flex布局

早先我們嘗試使用PhantomJS來完成此工作，雖然網(wǎng)上有說2.x支持Flex布局，但是我們的實踐結(jié)果是不支持。SlimerJS在Flex布局上支持的很好，無需任何額外工作。

Canvas繪制

我們的網(wǎng)頁使用了ECharts來進行圖表繪制，ECharts底層使用了canvas來繪制圖表。PhantomJS輸出的PDF在這方面支持很差，Stacked Column中莫名的出現(xiàn)很多空白間隙。SlimerJS的表現(xiàn)要好得多，不過有些淡虛線比實際要粗一些，色彩也深一些。

文檔分頁

如果希望輸出的PDF能夠支持分頁輸出（方便分頁打印），需要設(shè)置paperSize的Height來確定每頁pdf的高度。不過這里也是有坑的，每頁PDF高度會有幾個像素的差距，導致會多出一個空白頁。

CSS適配

渲染PDF的時候，瀏覽器進入打印模式，如果你沒有專門適配樣式，輸出效果會很差。很多元素的背景顏色/文本顏色/背景圖片不會展示出來。對于PhantomJS，網(wǎng)上有討論說需要加上如下樣式（我本人并未實踐過此方案）：

@media print { body { /*https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-adjust*/ -webkit-print-color-adjust: exact; }}對于SlimerJS，雖然paperSize存在相關(guān)設(shè)置（printBGColors/printBGImages），但是文本顏色似乎無法設(shè)置。所以我推薦在編寫CSS的時候注意如下細節(jié)：

• 將所有背景圖片轉(zhuǎn)換為Base64字符串直接在css中引入（幸好有webpack）
• 所有設(shè)置元素文本顏色和背景顏色的樣式需要兼容打印模式
• 文本顏色相關(guān)的設(shè)置不支持inherited，這點尤其注意

樣例代碼如下：

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

最后的忠告

不要寄希望于輸出的PDF與網(wǎng)頁中展示效果100%一致，幾乎不可能（尤其是網(wǎng)頁內(nèi)容相對比較復雜的時候），最終效果或多或少都會有些瑕疵。