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

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

ただいまの
回答率

87.78%

rails wicked_pdfでGoogle Chartが表示されない

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 732

score 0

前提・実現したいこと

railsのwicked_pdfを使ってGoogle Chartを使ったpdf表示をさせたいのですができない状況です。(pdf_controller.rbにルーティングしてviewを表示させるだけのアプリです。)
wicked_pdfのshow_as_htmlでhtml表示させると正常に表示されたので(下にスクリーンショット添付しています)、gemのwkhtmltopdf-binaryのバージョンなどが原因でうまくいってないのかと考えているのですが、何か思い当たる原因等分かる方いらっしゃればご教示いただきたいです。

該当のソースコード

pdf_controller.rb

class PdfController < ApplicationController
  def company_download
    respond_to do |format|
      format.pdf do
        render pdf: 'test', template: 'pdf/test.pdf.erb', show_as_html: params.key?('debug'), javscript_delay: 1000
      end
    end
  end
end


test.pdf.erb(テストのため、Google Chart公式サイトのQuick Start!より引用)

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
    <!--Load the AJAX API-->
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script>

      document.write('javascriptで表示しています')

      // Load the Visualization API and the corechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
    <div>test</div>
  </body>
</html>


show_as_htmlでhtml表示させたもの
イメージ説明
pdf表示させたもの
イメージ説明

試したこと

・https://stackoverrun.com/ja/q/5314519 こちらのサイトで説明されているinit()のコールバック処理を試しましたが表示できませんでした。

・https://developers.google.com/chart/interactive/docs/basic_load_libs

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>


上記リンクのGoogleChartの公式ドキュメントにバージョンの違いで上のコードじゃないと動かないかもみたいなことが書いてあり、どちらのコードも試したのですが(両方記述したものも試しました)が表示されないです。

補足情報(FW/ツールのバージョンなど)

Rails 6.0.3.1
ruby 2.6.5p114
wicked_pdf 2.1.0
wkhtmltopdf-binary 0.12.6.2
他に必要な補足情報等ありましたらコメントいただければ追記させていただきます!

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

0

2つの可能性が考えられます。

  • グラフの描画に時間がかかっているので、それ以前の結果を出力してしまっている
  • wkhtmltopdfのHTMLレンダリングエンジンが古い関係上、Google Chartsが正常動作しない

まずはディレイ時間を増やしてみて、前者か後者かの切り分けを行ってみましょう。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/07/29 11:52

    ご回答ありがとうございます!
    早速試してみます!

    キャンセル

  • 2020/07/29 12:01

    ディレイ時間を増やしてみましたが、表示されませんでした。

    キャンセル

  • 2020/07/29 12:11

    一度wkhtmltopdf-binaryのバージョンを変更して試してみます!

    キャンセル

  • 2020/07/30 12:13

    色々試してみたのですが、表示できないです、何かご存知の方いらっしゃればコメントいただきたいです。。

    キャンセル

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

  • ただいまの回答率 87.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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