8月 2020

Home › Archives for 8月 2020

2020/08/21

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

尚、先に言っておきますが、原因は不明です。   ただ、一応対策方法は分かったので、それについて書いています。  ちなみに、以下の記事にも書いたように以前にも 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;` のように文字コードがそのまま表示されてしまいました。  ちなみに `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

2020/08/20

NO IMAGE

[C#] 文字の Unicode を取得

2020/08/19

NO IMAGE

wkhtmltopdf で canvas に何も描画されない

ASP.NET Core wkhtmltopdf

## 環境  実際には 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 <script type="text/babel">   // do something  </script>```    そして、これだと処理速度が異常に遅くて使い物にならなかったので、結局 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` を指定する（時間は適宜変更）  ですが、私の環境では前者が不要でしたが、後者は必要でした。

テンプレートテスト

2020/08/21

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

2020/08/20

[C#] 文字の Unicode を取得

2020/08/19

wkhtmltopdf で canvas に何も描画されない

Translate

Popular Posts

Labels

Blog Archive