npm i @grapecity/ar-viewer-jaThe bundles are here: ./node_modules/@grapecity/ar-viewer-ja/dist
Using the physical path:
<head>
...
<link href="./node_modules/@grapecity/ar-viewer-ja/dist/jsViewer.min.css" rel="stylesheet">
...
</head>
<body>
...
<script type="text/javascript" src="./node_modules/@grapecity/ar-viewer-ja/dist/jsViewer.min.js"></script>
...
</body>Using the package name:
import "@grapecity/ar-viewer-ja/dist/jsViewer.min.js";
import "@grapecity/ar-viewer-ja/dist/jsViewer.min.css";Using attributes main and style from package.json:
import "@grapecity/ar-viewer-ja";<body>
...
<div id="viewerContainer" />
...
<script type="text/javascript">
let viewer;
function loadViewer() {
viewer = GrapeCity.ActiveReports.JSViewer.create({
element: '#viewerContainer'
});
}
loadViewer();
viewer.openReport('report.rdlx');
</script>
...
</body>JSViewer automatically detects the user's language and supports English, Japanese, and Chinese localizations.
To add custom localization to JSViewer, specify the URL of the JSON file containing the localization data:
GrapeCity.ActiveReports.JSViewer.create({
element: '#viewerContainer',
localeUri: './custom-locale.json'
});Or pass the JSON object directly:
GrapeCity.ActiveReports.JSViewer.create({
element: '#viewerContainer',
localeData: JSON.parse(`{
"export": {
"boolTextFalse": "False",
"boolTextTrue": "True"
},
"viewer": {
"toolbar":
{
"refresh": "Refresh"
}
}
}`
),
});