質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

PDF

PDF(Portable Document Format)とはISOによって国際標準として制定されている電子ドキュメント用の拡張子です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

2回答

4178閲覧

wkhtmltopdfでReactJSを実行したい

退会済みユーザー

退会済みユーザー

総合スコア0

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

PDF

PDF(Portable Document Format)とはISOによって国際標準として制定されている電子ドキュメント用の拡張子です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2017/01/19 05:09

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

処理の中で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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問