<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>ActiveReportsJSデモ</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-html.js"></script>
<script src="/activereportsjs/demos/arjs/dist/ar-js-xlsx.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"
/>
<link rel="stylesheet" type="text/css" href="app.css" />
<script src="performance.js"></script>
<script src="app.js"></script>
</head>
<body onload="load()">
<div class="container">
<div id="viewer-host"></div>
<div id="controls">
<div class="line">
<div class="label">レポート種別</div>
<select id="report-type" class="select">
<option value="Invoice">請求書</option>
<option value="BillingInvoice">払込取扱票</option>
</select>
</div>
<div class="line">
<div class="label">ページ数</div>
<select id="page-number" class="select">
<option>1</option>
<option>10</option>
<option>50</option>
<option>100</option>
<option>500</option>
<option>1000</option>
</select>
</div>
<div class="line">
<button id="preview-btn" onclick="runPreview()">プレビュー</button>
</div>
<div class="times">
<div class="time">
<div class="input_container">
<span id="first-page">...</span
><span id="first-page-suffix"> 秒</span>
</div>
<div class="time-label">１ページ目</div>
</div>
<div class="time">
<div class="input_container">
<span id="full-pages">...</span
><span id="full-pages-suffix"> 秒</span>
</div>
<div class="time-label">すべて</div>
</div>
</div>
<hr />
<div class="line">
<div class="label">エクスポート種別</div>
<select id="export-type" class="select">
<option>PDF</option>
<option>Excel</option>
<option>HTML</option>
</select>
</div>
<div class="line">
<button id="export-btn" onclick="runExport()" disabled>
エクスポート
</button>
</div>
<div>
<span id="export-time-line"
>表示中のレポートの出力：<b id="export-time"></b
><span id="export-time-suffix"> 秒</span></span
>
</div>
</div>
</div>
</body>
</html>
var exports = [
'pdf',
'xlsx',
'html'
];
var viewer;
var documentLoaded;
var stateChanged;
var report;
function load() {
viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer('#viewer-host', {language: 'ja'});
viewer.registerFont("fonts/fontsConfig.json");
viewer.toggleSidebar();
viewer.open('Invoice.rdlx-json', { ReportParams: [{ Name: 'Pages', Value: '1' }] });
}
function runPreview() {
report = document.getElementById('report-type').value;
var pages = parseInt(document.getElementById('page-number').value, 10);
clearAllResults();
GC.Performance.reset();
if (documentLoaded) documentLoaded();
documentLoaded = viewer.documentLoaded.register(function() {
GC.Performance.stop('full-pages');
documentLoaded();
documentLoaded = null;
showResult('full-pages');
setExportButtonState(true);
setPreviewButtonState(true);
setSpinnerVisible('preview-btn', false);
});
let renderingStarted = false;
if (stateChanged) stateChanged();
stateChanged = viewer.stateChanged.register(function(args) {
renderingStarted = renderingStarted || args.state.session.pageCount === 0;
if (renderingStarted && args.state.session.pageCount > 0) {
stateChanged();
stateChanged = null;
GC.Performance.stop('first-page');
showResult('first-page');
}
});
setExportButtonState(false);
setPreviewButtonState(false);
setSpinnerVisible('preview-btn', true);
GC.Performance.start('first-page');
GC.Performance.start('full-pages');
viewer.open(report + '.rdlx-json', { ReportParams: [{ Name: 'Pages', Value: [pages] }] });
}
function runExport() {
var exportType = exports[document.getElementById('export-type').selectedIndex];
setExportButtonState(false);
setPreviewButtonState(false);
clearExportResults();
setSpinnerVisible('export-btn', true);
GC.Performance.reset();
GC.Performance.start('export-time');
viewer.export(exportType, { filename: report }).then(function(result) {
GC.Performance.stop('export-time');
showExportResult('export-time');
setExportButtonState(true);
setPreviewButtonState(true);
setSpinnerVisible('export-btn', false);
result.download();
});
}
function showResult(timer) {
var element = document.getElementById(timer);
var result = GC.Performance.getResult()[timer];
element.innerHTML = (result / 1000).toFixed(2);
document.getElementById(timer + '-suffix').style.display = 'inline';
}
function showExportResult(timer) {
showResult(timer);
document.getElementById('export-time-line').style.visibility = 'visible';
}
function clearAllResults() {
setSpinnerVisible('export-btn', false);
setSpinnerVisible('preview-btn', false);
document.getElementById('first-page').innerHTML = '...';
document.getElementById('first-page-suffix').style.display = 'none';
document.getElementById('full-pages').innerHTML = '...';
document.getElementById('full-pages-suffix').style.display = 'none';
clearExportResults();
}
function clearExportResults() {
document.getElementById('export-time-line').style.visibility = 'hidden';
document.getElementById('export-time').value = '...';
}
function setPreviewButtonState(enabled) {
document.getElementById('preview-btn').disabled = !enabled;
}
function setExportButtonState(enabled) {
document.getElementById('export-btn').disabled = !enabled;
}
function setSpinnerVisible(button, visible) {
document.getElementById(button).style.backgroundImage = visible ? 'url("oval.svg")' : 'none';
}
