作成日: 2019/12/24 最終更新日: 2025/06/26
文書種別
使用方法
詳細
ActiveReportsJSのビューワと印刷機能では、CSSの@font-face規則を使用して、サーバーに配置したフォントを参照できます。これにより、クライアント環境に存在しないフォントを使用してレポートを表示・印刷することができます。
具体的な手順は以下の通りです。
-
フォントファイルを配置する
アプリケーションのルートディレクトリ直下にfontsフォルダを作成し、フォントファイルを配置します。
|- fonts
| |- font1.ttf
| |- font2.ttf
|
|- reports
| |- report1.rdlx-json
|
|- index.html(ビューワを配置しているページ) -
フォント記述子を定義する
フォント記述子は以下のプロパティで構成されます。
name フォント名(デザイナで設定した名称) source フォントファイルのパス ※この方法では上記以外のプロパティを設定しません。
◆サンプルコード(JavaScript)
const fonts = [
{name: 'IPAゴシック', source: '/fonts/ipag.ttf'},
{name: 'IPA明朝', source: '/fonts/ipam.ttf'}
];以下の形式でJSONファイル(fontsConfig.json)に保存することもできます。
{
"descriptors": [
{
"name": "IPAゴシック"
,"source": "/fonts/ipag.ttf"
},
{
"name": "IPA明朝"
,"source": "/fonts/ipam.ttf"
}
]
} -
フォント記述子を登録する
registerFontsメソッドを使用してフォント記述子を登録します。
◆サンプルコード(JavaScript)
// コードで定義したフォント記述子を登録する場合 await MESCIUS.ActiveReportsJS.Core.FontStore.registerFonts(...fonts); // JSONファイルから読み込む場合 await MESCIUS.ActiveReportsJS.Core.FontStore.registerFonts("/fonts/fontsConfig.json"); viewer.open('/reports/report1.rdlx-json')
※注意事項
この方法で利用可能なフォントファイルの形式は@font-faceの仕様に準拠します。
@font-face - CSS: カスケーディングスタイルシート | MDN
特にttc形式がサポートされていないことにご注意ください。
ttc形式のフォントはビューワ(ブラウザ)の描画には反映されません。
なお、PDFエクスポートでttc形式のフォントを埋め込むことは可能です。
関連情報
旧文書番号
84786