SlimerJSを使用してWebページをPDFに出力

本稿では、SlimerJSによってWebページを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バージョンをダウンロードします.通常のバージョンでは、複雑なWebページをレンダリングするときに、エンジンレベルのエラーが発生する可能性があります.
GTK 3のインストール
Firefox 46はGTK 3に依存するため、ここではGTK 3をインストールする必要がある.また、オペレーティングシステムのバージョンがCentOS 6の場合.x、それではGTK 3のインストールを放棄することをお勧めします.直接システムをアップグレードします.

yum install gtk3-devel

CUPSのインストール
CUPSはアップルが開発したユニバーサルUnix印刷システムで、CUPSがインストールされていなければSlimerJSがWebページを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サーバにサービスが配備されているため、Webレンダリングで使用されるフォントはWindowsやmacOSと大きく異なります.例えば、Windowsのマイクロソフト・ブラックはLinuxでは使用できません.また、インストールフォントにも2つの選択肢があります.1つ目はサーバに直接インストールすること、2つ目はWeb FontsとしてWebページから導入することです.
Flexレイアウト
ネット上では2.xはFlexレイアウトをサポートしていますが、私たちの実践結果はサポートされていません.SlimerJSはFlexレイアウトでよくサポートされており、追加の作業は必要ありません.
Canvasペイント
私たちのページではEChartsを使用してグラフを描き、EChartsの下部ではcanvasを使用してグラフを描きます.PhantomJS出力のPDFはこの点でサポートが悪く、Stacked Columnにはなぜか空白の隙間がたくさん現れています.SlimerJSの表現はずっといいですが、実際より薄い破線が太くて、色も濃いです.
ドキュメントページング
出力するPDFがページング出力(ページング印刷が便利)をサポートする場合は、paperSizeのHeightを設定して各ページpdfの高さを決定する必要があります.ただし、ここにも穴があり、各ページのPDFの高さには数画素の差があり、空白のページが1つ増えることがあります.
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を作成する際には、以下の詳細に注意することをお勧めします.

すべての背景画像をBase 64文字列に変換してcssに直接導入(幸いwebpackがある)

要素のテキスト色と背景色を設定するすべてのスタイルは、印刷モード

と互換性が必要である.

テキストの色に関する設定はinheritedをサポートしていません.この点は特に

に注意してください.
サンプルコードは次のとおりです.

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

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

最後の忠告
出力されたPDFがWebページの表示効果と100%一致することを期待しないでください.ほとんど不可能です(特にWebコンテンツが複雑な場合)、最終的な効果は多かれ少なかれ欠陥があります.