はじめに

帳票ライブラリStimulsoft report.jsを利用するときに、日本語の文字化け対応をどのように対処すべきか整理します。
特に帳票ファイルのPDF化には、PDFの特性をよく理解することが、この課題対応への近道になります。

前提

Stimulsoft report.js

PDFの特徴

Stimulsoftの話の前にPDFの特性を理解します。
PDFは印刷ファイルとして、デファクトと呼べるほど非常に普及しているファイル形式となります。

PDFの優れた特徴に「正確に再現する」というポリシーがあります。このなかでも、「忠実性」「自己充足性」が文字化け問題を考えるときに意識しなければならないポイントになります。

例えばブラウザなどは、フォント情報などを参考にはしますが、最終的にはユーザーが見ることができるということを優先するので、フォントが見つからない場合も、代替フォントで表示しようとします。また罫線などのレイアウトも文字が収まるように枠の大きさなどは自動拡張がなされるというように正確性は二の次になります。

これに対し、PDFは「忠実性」というだけあって情報通りに描画をするので指定したフォントが見つからなければ、「□□□」のように四角い文字など正しく表示されません。
また「自己充足性」という観点では、上記の問題を回避するために、どんな環境でも表示が可能なように、ファイルの中にフォント情報を埋め込むという仕組みもあり、これを正しく理解していないと文字化けの原因を把握するのが難しくなります。

Stimulsoft report.jsの印刷（PDF化）方式について

Stumulsoftビューアでは、印刷ボタンの表示を以下のオプションで変更が可能です。

オプション

オプション名	説明
Default	3つのメニューが表示されます。（デフォルト）
Pdf	PDF形式でブラウザの印刷ダイアログへデータを送ります。
WithPreview	プレビュー用のHTML画面へ遷移します。
Direct	HTML形式でブラウザの印刷ダイアログへデータを送ります。

記述方法

sample.js

var options = new Stimulsoft.Viewer.StiViewerOptions();
options.toolbar.printDestination = Stimulsoft.Viewer.StiPrintDestination.Default;

Defaultメニュー

Stimulsoftの「Print」メニューには、「PDF」と「Print」があります。この二つはどちらもブラウザの印刷ダイアログを利用しますが、「JavaScriptでPDFを生成しPDFデータとして送る」か「表示中のビューデータをそのままHtmlデータとして送る」かという違いがあります。よって、ダイアログが開いたあとにブラウザ機能にある「PDFに保存」を選択しても、中身の異なるPDFが生成されます。

これは、Htmlで送られたデータに対しては、ブラウザはOSのシステムフォントにアクセスできるのでPDFにフォント情報を埋め込むということを行いますが、JavaScriptはシステムフォントにアクセスできない為、「PDF」の方式ではフォント情報を埋め込むということができないということを意味します。
つまり、クライアント端末によっては、指定されたフォントがない場合に文字化けが発生するということになります。

ブラウザの印刷ダイアログ

回避策

注）Stimulsoft.NETなどサーバーサイドでPDFを生成可能な製品は、ローカルファイルにアクセスできるのでシステムフォントにあるフォントを設定していれば、この問題は発生しません。

常にHtmlでデータを送って、ブラウザの「PDFに保存」の機能を使えば問題は解消できます。
また、プログラムでPDF生成させたい場合などは、下記コードを記述することで、インターネット経由でJavaScriptがフォントを参照できるようになるので、PDFに自動でフォントを埋め込むことが出来るようになります。

なお、フォントファイル容量が大きすぎるとレスポンス性能に影響がでます。応答性をあげるためには、フォントエディター等で、フォントファイルを軽量化することをおすすめします。

Stimulsoft.Base.StiFontCollection.addOpentypeFontFile(
    "data/arial.ttf", //フォントパス
    "Arial"//フォント名
);

フォント関連の公式ドキュメント

Stimulsoft社より、以下のドキュメント（英文）が公開されています。参考にしてみてください。

フォントとPDFエクスポートの使用に関するいくつかの特殊性
Some particularities with using fonts and PDF export

レポートデザイナでのフォントの使用
Using fonts in the Report Designer

まとめ

Stimulsoftは、TrueTypeアウトラインベースのフォントをサポートしています。OpenTypeフォントのPostScriptアウトラインベースのフォントはサポートしていないので、ご注意ください。

OpenTypeフォントは、TrueTypeアウトラインとPostScriptアウトラインの両方を組み込むことが可能ですが、拡張子が「.otf」の場合TrueTypeアウトラインを含むケースと含まれないケースがあるので、これも留意点となります。
https://ja.wikipedia.org/wiki/OpenType

なお今回は、Stimulsoft report.jsを中心に説明しましたが、Stimulsoftは
Stimulsoft Dashboards.WEB
Stimulsoft Dashboards.WIN
Stimulsoft Dashboards.JS
Stimulsoft Dashboards.PHP
Stimulsoft Reports.Web
Stimulsoft Reports.Angular
Stimulsoft Reports.Blazor
Stimulsoft Reports.Net
Stimulsoft Reports.Wpf
Stimulsoft Reports.PHP
Stimulsoft Reports.Java

と数多くの開発言語をサポートしているので、JavaScript以外の言語であればシステムフォント問題に直面することはなくなります。

関連
【帳票】stimulsoft report.jsでのファイル保存（PDF Excel Wordなど）