[]
        
(Showing Draft Content)

表示言語を設定する

ActiveReportsJSでは、ビューワを英語(en)、日本語(ja)、中国語(zh)で表示するローカライズモジュールを提供しています。このモジュールを使用するには次のJSライブラリをインポートする必要があります。

  • ar-js-locales.js

また、npmを利用してローカライズモジュールをインストールすることができます。
@grapecity/activereports-localizationパッケージをプロジェクトにインストールしてください。

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

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

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

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

import "@grapecity/activereports-localization";

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

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

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

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

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

import { Viewer as ReportViewer } from "@grapecity/activereports-react";
import "@grapecity/activereports/styles/ar-js-viewer.css";
import "@grapecity/activereports-localization";

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

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

関連トピック