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

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

ただいまの
回答率

90.34%

  • JavaScript

    17481questions

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

  • Node.js

    1996questions

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

  • React.js

    911questions

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

  • npm

    311questions

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

  • PDF

    268questions

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

wkhtmltopdfでReactJSを実行したい

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,113

Buakaw

score 226

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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+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")

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • JavaScript

    17481questions

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

  • Node.js

    1996questions

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

  • React.js

    911questions

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

  • npm

    311questions

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

  • PDF

    268questions

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