表示言語を設定する

ActiveReportsJSでは、ビューワを英語（en）、日本語（ja）、中国語（zh）、韓国語（ko）、オランダ語（nl）、イタリア語（it）、ブラジルポルトガル語（pt-br）、ドイツ語（de）、フランス語（fr）で表示するローカライズモジュールを提供しています。このモジュールを使用するには次のJSライブラリをインポートする必要があります。

• ar-js-locales.js

また、npmを利用してローカライズモジュールをインストールすることができます。

@mescius/activereportsjs-i18nパッケージをプロジェクトにインストールしてください。

ローカライズモジュールのインポート

WebアプリケーションのHTMLで利用する場合はscriptタグで参照します。

<script type="text/javascript" src="scripts/locales/ar-js-locales.js"></script>

JavaScriptモジュールを使用するWebアプリケーションでは、次のようにパッケージからモジュールをインポートします。

import "@mescius/activereportsjs-i18n";

ビューワの表示言語を設定する

ビューワを日本語で表示するにはActiveReports.Viewerクラスを生成する際、languageオプションを設定します。

var viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer("#viewer-host", { language: "ja" });

JavaScriptアプリケーションでビューワを使用する方法については、JavaScriptを参照してください。

また、各JSフレームワーク（Angular、React、Vue）のアプリケーションにビューワを組み込む場合、対応パッケージのlanguageプロパティを使用して表示言語を設定できます。

次のサンプルコードは、Reactのビューワに対して日本語を設定します。

import { Viewer as ReportViewer } from "@mescius/activereportsjs-react";
import "@mescius/activereportsjs/styles/ar-js-viewer.css";
import "@mescius/activereportsjs-i18n";

function App() {
  return (
    <div className="App">
      <div id="viewer-host">
        <ReportViewer language="ja" />
      </div>
    </div>
  );
}

Angular、React、Vueのアプリケーションでビューワを使用する方法については、Angular、React、Vueを参照してください。

関連トピック

• 日本語で表示する[デモ]