wkhtmltopdfでReactJSを実行したい
解決済
回答 2
投稿
- 評価
- クリップ 0
- VIEW 1,795
wkhtmltopdfをというライブラリを使用しています。
wkhtmltopdfの設置先とは別のホストへ静的データを設置し、
そのURLを指定してPDF化を行っています。
静的データのPDF化は問題なくいっているのですが、
ReactJSのレンダリングが一切反映されません。
通常のdocument.write()などは実行されますが、ReactJSは反映されません。
wkhtmltopdfでは、ReactJSのような通常よりも少々大きいJSデータは反映されないのでしょうか・・
オプションのjavascript-delayを15,000などに設定しましたが状況変わらずです。
ご教授願います...
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="/assets/css/main.css">
<title>React App</title>
</head>
<body>
<script>
document.write("書き込みテスト!")// PDFヘ反映される
</script>
<h1>テスト</h1> <!-- PDFヘ反映される -->
<div id="root"></div> <!-- ReactJSのレンダリングターゲット -->
<script src="./assets/js/bundle.js"></script> <!-- FIXME:PDFヘされない、ReactJSのコンパイル済みのデータを読んでいまいる -->
</body>
</html>//wkhtmltopdfのソースコード (ES6)
import wkhtmltopdf from 'wkhtmltopdf'
/*
* ここのurlへ通常のブラウザで入るとレンダリングされているが
* wkhtmltopdfから参照するとReactJSが反映されず
*/
const url = "http://localhost:8080/?sample1=mock&sample2=mock"
const config = {
'pageSize': 'A3', //用紙サイズ
'dpi': '300', // 解像度
'output': "./pdf/output.pdf", // 出力ファイル名
'encoding': 'utf8', // 日本語対応
'javascript-delay': "15000", // JS実行待ち時間
'debug-javascript': true
}
wkhtmltopdf(url, config)-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+1
私も過去にプリントデバッグを行ったのですが、そのときは以下のようにして、ちょっとだけやりやすくしました。
// どこからでも使用できるようにエントリーポイント近辺で
// windowオブジェクトに擬似consoleを作り、PDF(HTML)上に出力するようにする
var consoleArea = document.getElementById("debug-console-area")
window.console = {
log: function(msg) {
consoleArea.innerHTML += "<br>" + msg;
},
assert: function(expect, msg) {
if (expect) return;
console.log('<font color="red">' + msg + "</font>")
}
}
// どこからでも普通のブラウザで実行するのと同じように使用
console.log("hoge")
console.assert(hogeFlag, "hogehoge")また、htmlファイルが作られているなら、ターミナルから
wkhtmltopdf --debug-javascript hoge.html result.pdf のように実行すれば、console.logの出力はターミナル(標準出力)になるので多少はデバッグがしやすくなります。
ちなみに、wkhtmltopdfはQtブラウザというものを内包してレンダリング等を行っているのですが、そのブラウザは組込み用途のWebkitベースらしく、ES5であっても使えない機能がある印象です。（軽量化のために削除しているのかなと推測しています）
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
check解決した方法
0
処理の中でMapを使用しているのは原因でした。
Mapは、bableを通してもES5へうまく変換されないようで、それがエラーとなり白紙で印刷されていました。
詳細にはnode wkhtmltopdf.jsと実行するんですが、node実行時のwkhmtltopdfのブラウザ表示のスタックトレース(普段console.logで出力されるところ)を取得できず、何が原因なのか分からずの状態でした。
表示側の方で、プリントデバックを一行づつひたすら行い、原因を突き止めました。
エラーがある箇所で止まっているので、これが表示されなくなればそこが原因ということです。
(原始的な方法なので何かほか便利方法あれば紹介欲しいです。)
例) document.write("通過1")
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 90.03%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる