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

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

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

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

文字化けしたPDF

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

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

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

アプリケーションの作成

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

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

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

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

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

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

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

文字化けしたPDF

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");

アプリケーションの実行

プロジェクトのビルドと実行

以下のコマンドを実行して、プロジェクトをビルドします。

npm run build

ビルド完了後、distフォルダにビルドされたファイルが出力されるので、Visual Studio Codeの拡張機能の「Live Server」を使用して実行します。

distフォルダ配下に生成されたindex.htmlを右クリックし、コンテキストメニューから「Open with Live Server」をクリックします。

Live Serverで実行

開発サーバーとブラウザが起動し、Webページに埋め込まれた帳票ビューワ上に帳票が表示されます。

Live Serverでの実行結果

PDFの出力

帳票ビューワのサイドバーからエクスポートボタンをクリックします。

エクスポートボタン

出力するファイル形式を選択します。ここではPDFを選択します。

PDFを選択

各種オプションを設定し、最下部の「エクスポート」ボタンをクリックするとPDFへの出力が開始し、クライアント環境にダウンロードされます。

エクスポートをクリック

ダウンロードされたPDFを開くと、以下のように文字化けすることなく、正常にPDFに出力ができました。

文字化けせずに出力されたPDF

おわりに

いかがでしたでしょうか。ActiveReportsJSでPDFを出力する場合は、前述のとおりフォントの設定がポイントになります。また、フォントを埋め込む場合は、使用するフォントのライセンスなどにも注意してご利用ください。

製品Webサイトでは、PDF出力含め、ActiveReportsJSの基本機能が試せるデモアプリケーションを公開しておりますので、是非一度お試しください。