wkhtmltopdfでReactJSを実行したい

wkhtmltopdfをというライブラリを使用しています。

wkhtmltopdfの設置先とは別のホストへ静的データを設置し、
そのURLを指定してPDF化を行っています。

静的データのPDF化は問題なくいっているのですが、
ReactJSのレンダリングが一切反映されません。

通常のdocument.write()などは実行されますが、ReactJSは反映されません。

wkhtmltopdfでは、ReactJSのような通常よりも少々大きいJSデータは反映されないのでしょうか・・

オプションのjavascript-delayを15,000などに設定しましたが状況変わらずです。
ご教授願います...

html
1<!doctype html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6    <link rel="shortcut icon" href="/favicon.ico">
7    <link rel="stylesheet" href="/assets/css/main.css">
8    <title>React App</title>
9</head>
10<body>
11<script>
12  document.write("書き込みテスト!")// PDFヘ反映される
13</script>
14
15<h1>テスト</h1> <!-- PDFヘ反映される -->
16<div id="root"></div> <!-- ReactJSのレンダリングターゲット -->
17<script src="./assets/js/bundle.js"></script> <!-- FIXME:PDFヘされない、ReactJSのコンパイル済みのデータを読んでいまいる -->
18</body>
19</html>

javascript
1//wkhtmltopdfのソースコード (ES6)
2import wkhtmltopdf from 'wkhtmltopdf'
3/* 
4 * ここのurlへ通常のブラウザで入るとレンダリングされているが
5 * wkhtmltopdfから参照するとReactJSが反映されず
6 */
7const url = "http://localhost:8080/?sample1=mock&sample2=mock"
8const config = {
9    'pageSize': 'A3',  //用紙サイズ
10    'dpi': '300', // 解像度
11    'output': "./pdf/output.pdf", // 出力ファイル名
12    'encoding': 'utf8', // 日本語対応
13    'javascript-delay': "15000", // JS実行待ち時間
14    'debug-javascript': true
15  }
16wkhtmltopdf(url, config)
17
18

行動規範の内容に同意します

回答2件

私も過去にプリントデバッグを行ったのですが、そのときは以下のようにして、ちょっとだけやりやすくしました。

javascript
1// どこからでも使用できるようにエントリーポイント近辺で
2// windowオブジェクトに擬似consoleを作り、PDF(HTML)上に出力するようにする
3var consoleArea = document.getElementById("debug-console-area")
4window.console = {
5  log: function(msg) {
6    consoleArea.innerHTML += "<br>" + msg;
7  },
8  assert: function(expect, msg) {
9    if (expect) return;
10    console.log('<font color="red">' + msg + "</font>")
11  }
12}
13
14// どこからでも普通のブラウザで実行するのと同じように使用
15console.log("hoge")
16console.assert(hogeFlag, "hogehoge")

また、htmlファイルが作られているなら、ターミナルから
wkhtmltopdf --debug-javascript hoge.html result.pdf のように実行すれば、console.logの出力はターミナル(標準出力)になるので多少はデバッグがしやすくなります。

ちなみに、wkhtmltopdfはQtブラウザというものを内包してレンダリング等を行っているのですが、そのブラウザは組込み用途のWebkitベースらしく、ES5であっても使えない機能がある印象です。（軽量化のために削除しているのかなと推測しています）

投稿2017/01/26 01:20

takeyuichi

総合スコア12

ベストアンサー

処理の中でMapを使用しているのは原因でした。
Mapは、bableを通してもES5へうまく変換されないようで、それがエラーとなり白紙で印刷されていました。

詳細にはnode wkhtmltopdf.jsと実行するんですが、node実行時のwkhmtltopdfのブラウザ表示のスタックトレース(普段console.logで出力されるところ)を取得できず、何が原因なのか分からずの状態でした。
表示側の方で、プリントデバックを一行づつひたすら行い、原因を突き止めました。
エラーがある箇所で止まっているので、これが表示されなくなればそこが原因ということです。
(原始的な方法なので何かほか便利方法あれば紹介欲しいです。)
例) document.write("通過1")

投稿2017/01/19 06:48

編集2017/01/19 06:54

退会済みユーザー

総合スコア0