wkhtmltopdf で PDF に変換した際に canvas 内の日本語だけが文字化けする

wkhtmltopdf を使って HTML を PDF へ変換した際、日本語が文字化けしたり文字コードがそのまま表示されたりして、かなりはまったのでメモしておきます。 尚、先に言っておきますが、原因は不明です。 ただ、一応対策方法は分かったので、それについて書いています。 ちなみに、以下の記事にも書いたように以前にも wkhtmltopdf と canvas ではまりましたが、今回もめちゃくちゃはまりました。 - [wkhtmltopdf で canvas に何も描画されない](https://kuttsun.blogspot.com/2020/08/wkhtmltopdf-canvas.html) 上記記事に書いたように、前提として wkhtmltopdf は現時点で ES6 に対応していないので注意してください。 ## 環境 実際には 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 ## 現象と対策 `fillText` で文字を描画する際、日本語をそのまま指定すると `あ` のように文字コードがそのまま表示されてしまいました。 ちなみに `12354` は `あ` の Unicode です。 - https://0g0.org/unicode/3042/ いろいろ試行錯誤した結果、どうやら文字コードを直接指定してから文字に変換すると上手く描画できることが分かりました。 ```js context.fillText(String.fromCharCode(12354), 0, 0); ``` 意味不明ですが、一応これで上手くいくようなので、以下のようにして描画することにしました。 - 文字列を文字に分割 - 各文字の Unicode を取得 - `String.fromCharCode` で Unicode を指定して文字を取得 - 文字を結合して `fillText` で出力 なんか文字コードへ変換してまたそのまま文字へ戻しているだけのように思いますが、何故かこれで上手くいったのでこうしています。 ### サロゲートペアへの対応 JavaScript では文字は UTF-16 で扱われているようなので、上記のことをどんな文字でも対応できるようにするには、サロゲートペアも考慮しておく必要があります。 サロゲートペア自体についてはググればいくらでも見つかるので割愛します。 私は JavaScript のコードも Razor で出力しており、各文字の Unicode を取得するのは C# 側でやりました。 たまたま私の環境ではサーバー側の処理で事足り、C# を使ったほうが簡単だったからです。 サロゲートペアを考慮して Unicode から文字を取得するのは以下の記事を参考にさせてもらいました。 - http://liosk.blog103.fc2.com/blog-entry-162.html ## 参考 URL - https://ics.media/entry/8385/ - https://qiita.com/sounisi5011/items/aa2d747322aad4850fe7 - https://qiita.com/jkr_2255/items/38d4bfdd9071560eaf8d - https://qiita.com/mpyw/items/15a25c5fef5f4a228b61 - https://barikanblog.com/javascript-es6-babel/#toc-2 - https://qiita.com/YusukeHirao/items/2f0fb8d5bbb981101be0 - http://liosk.blog103.fc2.com/blog-entry-162.html