JSViewer automatically detects the user's language and supports English, Japanese, and Chinese localizations. Here are examples of localizing JSViewer UI in an Angular application.
To set the UI language of JSViewer, the locale property can be used during initialization or at runtime. The supported values are 'en-US' (for English), 'ja-JP' (for Japanese), and 'zh-CN' (for Chinese).
| app.component.ts |
Copy Code
|
|---|---|
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");
}
}
|
|
To add custom localization to JSViewer, specify the URL of the JSON file containing the localization data using localeUri:
| app.component.ts |
Copy Code
|
|---|---|
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");
}
}
|
|
You can also pass the JSON object directly using localeData:
| app.component.ts |
Copy Code
|
|---|---|
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": "いいえ",
"boolTextTrue": "はい"
},
"viewer": {
"toolbar": {
"refresh": "更新"
}
}
}`
),
});
this.viewer.openReport("DemoReport.rdlx");
}
}
|
|