表示言語の設定

Blazorビューワは、システム環境設定によって言語を自動的に検出し、英語、日本語、中国語で表示されます。このトピックスでは、サポートされている言語に対してBlazorビューワの表示言語を設定する方法と、明示的にサポートされていない言語にカスタムローカリゼーションを追加する方法について説明します。

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

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

Index.razor	コードのコピー
<div id="viewerContainer"> <ReportViewer @ref="_viewer" ReportName="@_currentReport" Locale="ja-JP" /> </div>

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

Blazorビューワのローカライゼーションンファイルは、ar-blazor-viewer-locale.jsonです。このファイルは、MESCIUS.ActiveReports.Blazor.Viewer.jaパッケージをインストールするときに、mescius.activereports.blazor.viewer.ja\contentフォルダ内のプロジェクトに自動的に追加されます。このパッケージは、Blazorビューワを使用するために必要です。ar-blazor-viewer-locale.jsonファイルにはビューワをローカライズするために必要なすべての日本語の文字列が含まれています。

BlazorビューワのUIにカスタムローカリゼーションを追加するには、次の手順を実行します。

ar-blazor-viewer-locale.jsonファイルをwwwrootフォルダにコピーし、ファイルの名前をar-blazor-viewer-fr-locale.jsonに変更します。

ar-blazor-viewer-fr-locale.jsonファイルを開き、ファイル内の文字列をフランス語に翻訳します。ここでは Blazorビューワコンポーネントをフランス語にローカライズしているため、文字列をフランス語に翻訳する必要があります。

ar-blazor-viewer-fr-locale.jsonのサンプルコード	コードのコピー
{ "viewer": { "toolbar": { "refresh": "Rafraîchir", "cancel": "Annuler" }, "search": { "start-search-btn": "Recherche", "paneltitle": "Recherche" } } }

Blazorビューワにカスタムローカリゼーションを追加するには、LocaleUriを使用してローカリゼーションデータを含むar-blazor-viewer-fr-locale.jsonファイルのURLを指定します。

Index.razor	コードのコピー
@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); } }

Index.razor

コードのコピー

@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);
    }
}

メモ：上の例では、いくつかのローカリゼーション文字列が翻訳されていません。ローカリゼーション文字列が欠落している値は、デフォルトで日本語で表示されます。

別のアプローチとしては、localeDataを使用して、ローカライズされたJSONをビューワに直接渡すことができます。

Index.razor	コードのコピー
@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); } }

Index.razor

コードのコピー

@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);
    }
}