パフォーマンス

このサンプルでは、プレビューおよびエクスポートのパフォーマンスを計測します。レポートの種類を選択し、[プレビュー]ボタン、または、[エクスポート]ボタンをクリックしてください。

<!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/ie-polyfills.js"></script> <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">1ページ目</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 ActiveReports.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'; }