へっぽこプログラマーの備忘録
プログラムを中心とした個人的なメモ用のブログです。 タイトルは迷走中。
内容の保証はできませんのであしからずご了承ください。
menu
keyboard_arrow_up
Top
search
close
home
ホーム
computer
PC一般
construction
開発環境・ツール
code
プログラミング
home
ホーム
computer
PC一般
construction
開発環境・ツール
code
プログラミング
Home
›
wkhtmltopdf
›
wkhtmltopdf で canvas に何も描画されない
2020/08/19
wkhtmltopdf で canvas に何も描画されない
update
event_note
label
ASP.NET Core
label
wkhtmltopdf
wkhtmltopdf を使って HTML を PDF へ変換していたのですが、canvas に JavaScript で描画しているはずの内容が全く表示されず、かなりはまったのでメモしておきます。
## 環境 実際には ASP.NET Core で Rotativa.AspNetCore を使っており、その中で HTML から PDF への変換に wkhtmltopdf が使われています。 - ASP.NET Core 2.2 - [Rotativa.AspNetCore](https://github.com/webgio/Rotativa.AspNetCore) 1.1.1 - wkhtmltopdf 0.12.4 ## 原因 結論から先に書くと、現時点で wkhtmltopdf は ES6 に対応していないため、ES6 で追加されたコードを書くと正しく実行されないようです。 具体的には、私の場合、以下のようなコードを書いていたことが原因でした、 - 変数宣言で `let` を使っていた - `codePointAt` で文字コードを取得していた ## 対策 `let` ならば `var` に置き換えるとかで簡単に対応可能ですが、中には対応が難しいものもあるかと思います。 一応対策として、babel を使って ES5 以前のコードにコンパイルするという手があります。 babel のインストール方法や使い方はググればいくらでも見つかるので割愛します。 ただ、私は JavaScript のコードも Razor で出力していたため、事前コンパイルせず(できず)、以下のようにブラウザ(この場合は wkhtmltopdf) 内でコンパイルせざるを得ませんでした。 ```html ``` そして、これだと処理速度が異常に遅くて使い物にならなかったので、結局 ES6 のコードを使わないように書き直して対応しました。 ## 原因が分かるまでの経緯 「wkhtmltopdf canvas」などでググってみると、ChartJS が描画されないといった内容が多くヒットしますが、canvas を使っているのは同じはずなので、まずはそれを参考にいろいろ試してみました。 具体的には以下です。 - `canvas` を `div` で括ってサイズを同じにする - `--no-stop-slow-scripts --javascript-delay 1000` を指定する(時間は適宜変更) これらについては参考 URL やググってみるといろいろヒットするので、割愛します。 しかし、これらのことをやっても状況は変わらず、それ以上の情報はいくらググっても見つかりませんでした。 ただ、`canvas` 内の表示だけがおかしいので、JavaScript に問題があるのではないかということは推測できました。 デバッグが非常にやりづらく、仕方ないので少しずつ JavaScript コードを埋め込んで動作確認していたら、どうも途中から JavaScript のコードが実行されていないような感じでした。 そこでふと `let` を見て、比較的最近追加された仕様だったなぁと思い、`var` に変更したところ上手く描画されるようになりました。 いや、これ本当にはまった。 尚、wkhtmltopdf を現時点で最新の 0.12.6 に変更しても同様でした。 また、上述した - `canvas` を `div` で括ってサイズを同じにする - `--no-stop-slow-scripts --javascript-delay 1000` を指定する(時間は適宜変更) ですが、私の環境では前者が不要でしたが、後者は必要でした。
## 参考 URL - https://github.com/wkhtmltopdf/wkhtmltopdf/issues/3596 - https://qiita.com/hakatakinoco/items/47ea32689096004a5b72 - https://stackoverflow.com/questions/42561036/wkhtmltopdf-does-not-render-chart-js-2-5-0-graph
tweet
facebook
Pocket
B!
はてブ
LINE
chevron_left
chevron_right
Translate
Popular Posts
TortoiseGit でコミットメッセージを変更する
image
NO IMAGE
smbclient で session setup failed: NT_STATUS_LOGON_FAILURE が表示される
Docker for Windows の設定
image
NO IMAGE
マージ元ブランチとマージ先ブランチ
image
NO IMAGE
TortoiseSVN ロック状態のチェック
TortoiseGit でブランチ間の差分を見る
image
NO IMAGE
Visual Studio で文字がにじむ(ぼやける)
image
NO IMAGE
AsciidocFX をビルドする
image
NO IMAGE
PowerShellでブレークポイントが設定できない場合
[Python] 文字列の判定で、None と空文字を同時に判定する
Labels
.NET Core
31
.NET Framework
17
.NET Standard
2
AdminLTE
1
AI
1
Apache
3
AppVeyor
2
AsciiDoc
7
ASP.NET Core
55
Atom
4
AWS
5
AWS Cloud9
4
blockdiag
1
Blogger
13
Bootstrap
3
C/C++
6
C#
106
CentOS
3
Chrome
1
Chronograf
3
chrony
1
Codecov
1
CSS
1
Docker
80
DokuWiki
4
Doxygen
1
draw.io
1
EasyTag
1
Electron
1
Electron.NET
2
Entity Framework Core
9
Excel
2
FFmpeg
3
Firefox
6
Flask
1
Git
19
GitBook
4
GitBucket
7
GitHub
7
GitLab
39
Go
1
Google
1
Google Cloud Platform
1
Grafana
13
GStreamer
2
HTML
5
IIS
8
InfluxDB
14
JavaScript
15
Jekyll
2
Jenkins
7
Linux
34
Log4View
1
MahApps.Metro
3
MaterialDesignInXamlToolkit
1
MkDocs
2
MongoDB
5
MVC
1
MVVM
6
nginx
3
NLog
3
Node.js
8
npm
1
NVIDIA
3
onvif
1
OpenAPI
2
OpenCV
4
OpenSSL
3
OpenVINO
2
ownCloud
2
pandas
1
Pine Script
1
PlantUML
5
Portainer
3
PowerShell
8
Prism
2
PySide
19
Python
88
PyTorch
1
RabbitVCS
1
Razor
3
redis
1
Redmine
33
Redoc
1
remark.js
2
rocketchat
10
Ruby
3
scikit-learn
1
shotcut
1
SignalR
1
Slack
1
Socket.IO
1
SonarQube
5
Sphinx
10
SQL Server
5
SQLite
1
StableDiffusion
1
Subversion
2
Swagger
1
Swarmpit
1
Syslog
3
Telegraf
6
Tesseract
3
TestLink
2
Tomcat
2
TortoiseGit
11
TortoiseSVN
2
Trading View
1
Traefik
3
Travis CI
1
Ubuntu
31
Visual Studio
39
Visual Studio Code
10
VSCode
8
Vue.js
8
Windows
62
Windows 10
5
Windows ADK
1
Windows API
2
Windows Embedded
4
wkhtmltopdf
2
Word
3
WPF
12
WSL
5
WSL2
5
Xamarin
1
xUnit
5
yaml
1
yolo
1
アプリケーション
1
デザインパターン
1
テスト
1
バッチファイル
2
プログラミング
4
ライセンス
1
暗号資産(仮想通貨)
1
英語
2
確定申告
1
機械学習
1
強化学習
1
雑記
1
書籍
1
数学
1
正規表現
1
動画編集
1
Blog Archive
►
2024
(18)
►
9月
(5)
►
8月
(1)
►
7月
(2)
►
6月
(1)
►
4月
(2)
►
3月
(1)
►
2月
(5)
►
1月
(1)
►
2023
(30)
►
12月
(3)
►
11月
(5)
►
10月
(2)
►
9月
(1)
►
8月
(2)
►
7月
(4)
►
6月
(2)
►
5月
(3)
►
4月
(2)
►
3月
(2)
►
2月
(3)
►
1月
(1)
►
2022
(106)
►
12月
(5)
►
11月
(1)
►
10月
(3)
►
9月
(6)
►
8月
(7)
►
7月
(6)
►
6月
(13)
►
5月
(9)
►
4月
(15)
►
3月
(11)
►
2月
(14)
►
1月
(16)
►
2021
(85)
►
12月
(11)
►
11月
(6)
►
10月
(4)
►
9月
(10)
►
8月
(8)
►
7月
(4)
►
6月
(18)
►
5月
(7)
►
4月
(8)
►
3月
(2)
►
2月
(2)
►
1月
(5)
▼
2020
(56)
►
12月
(1)
►
11月
(3)
►
10月
(3)
►
9月
(3)
▼
8月
(3)
wkhtmltopdf で PDF に変換した際に canvas 内の日本語だけが文字化けする
[C#] 文字の Unicode を取得
wkhtmltopdf で canvas に何も描画されない
►
7月
(7)
►
6月
(7)
►
5月
(2)
►
4月
(6)
►
3月
(6)
►
2月
(3)
►
1月
(12)
►
2019
(92)
►
12月
(13)
►
11月
(9)
►
10月
(3)
►
9月
(2)
►
8月
(3)
►
7月
(5)
►
6月
(11)
►
5月
(6)
►
4月
(17)
►
3月
(9)
►
2月
(6)
►
1月
(8)
►
2018
(100)
►
12月
(1)
►
11月
(11)
►
10月
(8)
►
9月
(6)
►
8月
(10)
►
7月
(10)
►
6月
(8)
►
5月
(9)
►
4月
(8)
►
3月
(14)
►
2月
(4)
►
1月
(11)
►
2017
(117)
►
12月
(14)
►
11月
(20)
►
10月
(17)
►
9月
(19)
►
8月
(10)
►
7月
(8)
►
6月
(3)
►
5月
(6)
►
4月
(5)
►
3月
(2)
►
2月
(8)
►
1月
(5)
►
2016
(91)
►
12月
(5)
►
11月
(9)
►
10月
(11)
►
9月
(9)
►
8月
(6)
►
7月
(14)
►
6月
(14)
►
5月
(11)
►
4月
(10)
►
3月
(2)
►
2015
(23)
►
12月
(4)
►
11月
(2)
►
10月
(8)
►
9月
(8)
►
7月
(1)
►
2013
(3)
►
11月
(1)
►
9月
(1)
►
7月
(1)
►
2012
(2)
►
7月
(1)
►
6月
(1)
►
2011
(1)
►
9月
(1)
►
2009
(1)
►
7月
(1)
►
2008
(2)
►
11月
(1)
►
7月
(1)
►
2007
(3)
►
10月
(3)