表示言語の設定

JSビューワは、システム環境設定によって言語を自動的に検出し、英語、日本語、中国語で表示されます。次は、AngularアプリケーションでJSビューワの表示言語を設定する例です。

JSビューワの表示言語の設定

JSビューワの表示言語を設定するには、初期化中または実行時にlocaleプロパティを使用します。JSビューワを英語（en-US）、日本語（ja-JP）、中国語（zh-CN）で表示できます。

app.component.ts	コードのコピー
import { Component } from '@angular/core'; declare var GrapeCity: any; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { title = "app"; viewer: any; ngAfterViewInit() { this.viewer = new GrapeCity.ActiveReports.JSViewer.create({ element: '#viewer-host', locale : "ja-JP" }); this.viewer.openReport("DemoReport.rdlx"); } }

app.component.ts

コードのコピー

import { Component } from '@angular/core';
declare var GrapeCity: any;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  title = "app";
  viewer: any;
  ngAfterViewInit() {
    this.viewer = new GrapeCity.ActiveReports.JSViewer.create({
      element: '#viewer-host',
      locale : "ja-JP"
    });
    this.viewer.openReport("DemoReport.rdlx");
  }
}

カスタムローカライゼーションの追加

JSビューワにカスタムローカリゼーションを追加するには、localeUriを使用してローカリゼーションデータを含むJSONファイルのURLを指定します。

app.component.ts	コードのコピー
import { Component } from '@angular/core'; declare var GrapeCity: any; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { title = "app"; viewer: any; ngAfterViewInit() { this.viewer = new GrapeCity.ActiveReports.JSViewer.create({ element: '#viewer-host', localeUri: './custom-locale.json' }); this.viewer.openReport("DemoReport.rdlx"); } }

app.component.ts

コードのコピー

import { Component } from '@angular/core';
declare var GrapeCity: any;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  title = "app";
  viewer: any;
  ngAfterViewInit() {
    this.viewer = new GrapeCity.ActiveReports.JSViewer.create({
      element: '#viewer-host',
      localeUri: './custom-locale.json'
    });
    this.viewer.openReport("DemoReport.rdlx");
  }
}

localeDataを使用して、JSONオブジェクトを直接渡すことができます。

app.component.ts	コードのコピー
import { Component } from '@angular/core'; declare var GrapeCity: any; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { title = "app"; viewer: any; ngAfterViewInit() { this.viewer = new GrapeCity.ActiveReports.JSViewer.create({ element: '#viewer-host', localeData: JSON.parse(`{ "export": { "boolTextFalse": "No", "boolTextTrue": "Yes" }, "viewer": { "toolbar": { "refresh": "Refresh" } } }` ), }); this.viewer.openReport("DemoReport.rdlx"); } }

app.component.ts

コードのコピー

import { Component } from '@angular/core';
declare var GrapeCity: any;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  title = "app";
  viewer: any;
  ngAfterViewInit() {
    this.viewer = new GrapeCity.ActiveReports.JSViewer.create({
      element: '#viewer-host',
      localeData: JSON.parse(`{
        "export":  {
          "boolTextFalse": "No",
          "boolTextTrue": "Yes"
        },
        "viewer": {
          "toolbar": {
          "refresh": "Refresh"
        }
        }
      }`
      ),
    });
    this.viewer.openReport("DemoReport.rdlx");
  }
}