Blazor Viewer supports English, Japanese, and Chinese localizations for which the localized files are already available. This article discusses setting a Blazor Viewer UI language from the supported localizations and adding custom localization for the languages that are not explicitly supported.

Set Blazor Viewer UI Language

To set the UI language of Blazor Viewer, specify the Locale API while initializing the component. The supported values are 'en-US' (for English), 'ja-JP' (for Japanese), and 'zh-CN' (for simplified Chinese).

<div id="viewerContainer">
     <ReportViewer @ref="_viewer" ReportName="@_currentReport" Locale="ja-JP" />
</div>

Add Custom Localization using Resource Strings

The localization file for Blazor Viewer is ar-blazor-viewer-locale.json. The file is added to the project in the grapecity.activereports.blazor.viewer\content\ folder when you install the MESCIUS.ActiveReports.Blazor.Viewer NuGet package, which is required when using Blazor Viewer. By default, the 'ar-blazor-viewer-locale.json' file contains all the strings in English that are required to localize the viewer.

To add custom localization to the Blazor Viewer UI,

1. Copy the 'ar-blazor-viewer-locale.json' file to the 'wwwroot' folder and rename the file to, say, 'ar-blazor-viewer-fr-locale.json'.
2. Open the file and translate the strings in the file to any language, say French. For example, here we are localizing the Blazor Viewer component for French language, so the strings must be translated to French language.

   Sample ar-blazor-viewer-fr-locale .json	Copy Code
   { "viewer": { "toolbar": { "refresh": "Rafraîchir", "cancel": "Annuler" }, "search": { "start-search-btn": "Recherche", "paneltitle": "Recherche" } } }

3. Specify the URL of 'ar-blazor-viewer-fr-locale.json' file using the LocaleUri API to add localization to the viewer.
   

   Index.razor

   Copy Code

   @page "/" @using BlazorViewerServer.Data @inject ReportsService ReportsService <div class="main"> <ReportList ReportsList="@reportsList" CurrentReport="@_currentReport" OnClickCallback="OnClick"></ReportList> <div id="viewerContainer"> <ReportViewer @ref="_viewer" ReportName="@_currentReport" LocaleUri="./ar-blazor-viewer-fr-locale.json" /> </div> </div> @code{ private ReportViewer _viewer; private List<string> reportsList; private string _currentReport = null; protected override void OnInitialized() { reportsList = ReportsService.GetReports().ToList(); _currentReport = reportsList.FirstOrDefault(); } private async void OnClick(string res) { _currentReport = res; await _viewer.OpenReport(_currentReport); } }

   Note: As you may notice, some of the localization strings are skipped in the above example. The values for which localization strings are missing are by default displayed using EN localization data.

An alternate approach is to use the LocaleData API to directly assign the localized JSON to the viewer, as shown.

@page "/"
@using BlazorViewerServer.Data
@inject ReportsService ReportsService
<div class="main">
    <ReportList ReportsList="@reportsList" CurrentReport="@_currentReport" OnClickCallback="OnClick"></ReportList>
    <div id="viewerContainer">
        <ReportViewer @ref="_viewer" ReportName="@_currentReport" LocaleData="@_localeData" />
    </div>
</div>
@code{
    private ReportViewer _viewer;
    private List<string> reportsList;
    private string _currentReport = null;
 
    string _localeData = "{\"viewer\":{\"toolbar\":{\"refresh\":\"Rafraîchir\",\"cancel\":\"Annuler\"},\"search\":{\"start-search-btn\":\"Recherche\",\"paneltitle\":\"Recherche\"} } }";
   
    protected override void OnInitialized()
    {
        reportsList = ReportsService.GetReports().ToList();
        _currentReport = reportsList.FirstOrDefault();
    }
    private async void OnClick(string res)
    {
        _currentReport = res;
        await _viewer.OpenReport(_currentReport);
    }
}