[js] chart.jsのグラフをwkhtmltopdfでpdfに保存する

2017/02/21

表題のことをしたいとなった。

結論目的は果たされたのだけどハマリポイントとして以下があったのでメモ。

①chart.jsのバージョンが1系じゃないと、なぜかうまくいかない。

②wkhtmltopdf＋snoppyだとエラーになり、直接wkhtmltopdfのコマンドを実行すると問題なく保存できる。

特に①についてはまった..

wkhtmltopdfのcentosへのインストール

http://d.hatena.ne.jp/zhuweichen/20151030/1446184535

Snoppyのエラー

Resolving links (4/6)
[================== in /pj/rtoaster/batch/rtoaster_log/sf_project/pdf/vendor/knplabs/knp-snappy/src/Knp/Snappy/AbstractGenerator.php on line 336

1 2	Resolving links (4/6) [================== in /pj/rtoaster/batch/rtoaster_log/sf_project/pdf/vendor/knplabs/knp-snappy/src/Knp/Snappy/AbstractGenerator.php on line 336

解決できないので、wkhtmlを直接実行にシフト。

しかしながら、chartjsのグラフ描画が取得できない。

下記でもグラフ描画系jsのpdfが取れないと盛り上がっている。

https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1964

ほかのsvgでの描画系jsも、PDF化できない現象が多い見たい。

しかし下記ではchartjsのpdfを取れたというのもあるし、

http://ayaketan.hatenablog.com/entry/2014/02/02/211557

上記のgithubのissueでも下記のページは取れたというコメントあり。

Maybe the previous page was to complexe.

Even with current version of wkhtmltopdf 0.12.2.1 (with patched qt) this is working perfectly :

wkhtmltopdf --javascript-delay 10000 http://netdna.webdesignerdepot.com/uploads7/easily-create-stunning-animated-charts-with-chart-js/chartjs-demo.html testchartjs2.pdf

Not sure why this page does not work then http://www.chartjs.org/docs/#line-chart-example-usage.

Very good job with wkhtmltopdf.

Maybe the previous page was to complexe.

Even with current version of wkhtmltopdf 0.12.2.1 (with patched qt) this is working perfectly :

wkhtmltopdf --javascript-delay 10000 http://netdna.webdesignerdepot.com/uploads7/easily-create-stunning-animated-charts-with-chart-js/chartjs-demo.html testchartjs2.pdf

Not sure why this page does not work then http://www.chartjs.org/docs/#line-chart-example-usage.

Very good job with wkhtmltopdf.

http://netdna.webdesignerdepot.com/uploads7/easily-create-stunning-animated-charts-with-chart-js/chartjs-demo.html

ここで試したら、確かにpdf化ができた…

上記ページのjsの記法を見ると、最新のchartjs(2.5)と異なるので、思い切ってバージョンを下げたらうまくいきました。。。

- javascript | js