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"
}
}
}`),
});