ActiveReportsJSでPDFを文字化けさせずに出力する | MESCIUS.devlog

Web帳票の最もポピュラーな出力形式はPDFですが、JavaScript帳票ライブラリ「ActiveReportsJS（アクティブレポートJS）」もPDFの出力に対応しています。

しかしながら、最近お客様より「PDFに出力したら文字化けした。」というお問い合わせをいただくことがあります。

実はActiveReportsJSでは、PDFに出力するときに、埋め込むフォントを正しく設定しないと以下のように日本語が文字化けしてしまうのです。

ActiveReportsJSのPDF出力機能が標準でサポートしているフォントは、Times-Roman、Helveticaなどの英字フォントなので、日本語のフォントは別途設定する必要があります。

また、ブラウザからはクライアントのリソース（フォントファイル）にアクセスできないので、設定したいフォントはアプリケーションをホストしているサーバー側から渡す必要があります。

今回はActiveReportsJSで文字化けさせずに、正しくPDFを出力する方法をご紹介したいと思います。

アプリケーションの作成
アプリケーションの実行
- プロジェクトのビルドと実行
- PDFの出力
さいごに

アプリケーションの作成

先日公開したクイックスタート記事の手順にしたがい、ActiveReportsJSを組み込んだアプリケーションを作成します。こちらをベースに手順を紹介していきます。

使用するレポートファイルとフォントファイル

前述の通り、ActiveReportsJSでPDFを文字化けせずに出力するには、フォントを正しくPDFに埋め込む必要があり、埋め込むフォントはサーバー側で保持する必要があります。詳細な設定方法は以下のナレッジ文書もご覧ください。

ナレッジベースの「PDFにフォントを埋め込む方法」を見る

そのため、今回は無償で配布可能なIPAゴシックフォントをレポートで使用します。IPAフォントの詳細やライセンスについては以下のサイトをご覧ください。

クイックスタート記事で使用したレポートファイル中のフォントをIPAゴシックフォントで置き換えたものをGitHubの以下のリポジトリで公開しています。

Invoice_green_ipa.rdlx-jsonとIPAゴシックフォント（ipag.ttf）をダウンロードしてreportsフォルダとfontsフォルダにそれぞれ配置してください。

webpackの設定の変更

webpackの設定ファイルであるwebpack.config.jsファイルを、フォントファイルの読み込みの設定を追加するために、以下のように書き換えます。

const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      {
        test: /\.rdlx-json$/,
        use: [
          {
            loader: "file-loader",
            options: { name: "[name].[ext]", outputPath: "reports/" },
          },
        ],
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: "file-loader",
            options: { name: "[name].[ext]", outputPath: "fonts/" },
          },
        ],
      },
    ],
  },
  plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })],
};

JSファイルの修正

index.jsを以下のように書き換え、使用するフォントの登録を行います。また、レポートファイルをIPAフォントを使用したもの（invoice_green_ipa.rdlx-json）に置き換えます。

import "@grapecity/activereports/dist/ie-polyfills";
import * as GCAR from "@grapecity/activereports";
import "@grapecity/activereports-localization";
import "@grapecity/activereports/styles/ar-js-ui.css"; 
import "@grapecity/activereports/styles/ar-js-viewer.css"; 
// レポートファイルとフォントファイル読込
import "./reports/invoice_green_ipa.rdlx-json";
import "./fonts/ipag.ttf";

// フォント記述子の定義
var IPAGothic = { name: "IPAゴシック", source: "./fonts/ipag.ttf" };

var arjsviewer = new GCAR.ReportViewer.Viewer("#arjsviewer", { language: "ja" });

// サイドバーのエクスポート機能を有効化
arjsviewer.availableExports = ["pdf", "xlsx", "html"];

// 定義済みのフォント記述子を登録する
GCAR.Core.FontStore.registerFonts(IPAGothic);
arjsviewer.open("./reports/invoice_green_ipa.rdlx-json");