Demos
Code Samples
Viewer
Localization

Viewer Component Localization

These examples demonstrate how to localize the ActiveReportsJS Viewer component's user interface in Angular, React, Vue, and pure JavaScript applications. The Viewer's UI is set to use the Japanese language ("ja"). Other supported languages include "fr" (French), "es" (Spanish), "zh" (Chinese), "nl" (Dutch), "de" (German), "it" (Italian), "pt-br" (Brazilian Portuguese), and the default language "en" (English). For additional details, please visit the Localization page. To view the code, scroll down the page.

JavaScript
Angular
Vue
React
index.html
Copy to CodeMine
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>ActiveReportsJS Report Viewer Localization Sample</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link
      rel="stylesheet"
      href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css"
    />

    <script src="/activereportsjs/demos/arjs/dist/ar-js-core.js"></script>
    <script src="/activereportsjs/demos/arjs/dist/ar-js-viewer.js"></script>
    <script src="/activereportsjs/demos/arjs/dist/ar-js-pdf.js"></script>
    <script src="/activereportsjs/demos/arjs/dist/ar-js-tabular-data.js"></script>
    <script src="/activereportsjs/demos/arjs/dist/ar-js-html.js"></script>
    <script src="/activereportsjs/demos/arjs-localization/dist/ar-js-locales.js"></script>
    <script src="$DEMOROOT$/lib/purejs/license.js"></script>

    <link
      href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="/activereportsjs/demos/arjs/styles/ar-js-ui.css"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="/activereportsjs/demos/arjs/styles/ar-js-viewer.css"
    />
    <style>
      #viewer-host {
        margin: 0 auto;
        width: 100%;
        height: 600px;
      }
    </style>
  </head>
  <body>
    <div id="viewer-host"></div>
    <script>
      MESCIUS.ActiveReportsJS.Core.FontStore.registerFonts(
        "/activereportsjs/demos/resource/fontsConfig.json"
      );
      const viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer(
        "#viewer-host",
        {
          language: "ja",
        }
      );
      viewer.theme="ActiveReports";
      viewer.open(
        "/activereportsjs/demos/resource/reports/Frontstore.rdlx-json"
      );
    </script>
  </body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>ActiveReportsJS Report Viewer Localization Sample</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css" /> <script src="/activereportsjs/demos/arjs/dist/ar-js-core.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-viewer.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-pdf.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-tabular-data.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-html.js"></script> <script src="/activereportsjs/demos/arjs-localization/dist/ar-js-locales.js"></script> <script src="$DEMOROOT$/lib/purejs/license.js"></script> <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet" /> <link rel="stylesheet" type="text/css" href="/activereportsjs/demos/arjs/styles/ar-js-ui.css" /> <link rel="stylesheet" type="text/css" href="/activereportsjs/demos/arjs/styles/ar-js-viewer.css" /> <style> #viewer-host { margin: 0 auto; width: 100%; height: 600px; } </style> </head> <body> <div id="viewer-host"></div> <script> MESCIUS.ActiveReportsJS.Core.FontStore.registerFonts( "/activereportsjs/demos/resource/fontsConfig.json" ); const viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer( "#viewer-host", { language: "ja", } ); viewer.theme="ActiveReports"; viewer.open( "/activereportsjs/demos/resource/reports/Frontstore.rdlx-json" ); </script> </body> </html>