ActiveReportsJS 性能评估

该示例通过模拟数据来测试 ActiveReportsJS 报表渲染和导出性能,可以作为评估报表性能的参考示例。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <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-xlsx.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> <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" /> <script src="$DEMOROOT$/lib/purejs/license.js"></script> <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="root"></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"> s</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"> s</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" >Displayed report exported in <b id="export-time"></b ><span id="export-time-suffix"> s</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('#root', {language: 'zh'}); viewer.registerFont("fonts/fontsConfig.json"); viewer.toggleSidebar(); } 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'; }
html { height: 100%; } body { margin: 0; height: 100%; } #root { height: 100vh; width: calc(100% - 250px); min-width: 300px; } .container { height: 100%; display: flex; flex-direction: row; font-family: Open Sans,Segoe UI,Tahoma,Geneva,Verdana,sans-serif; } #controls { width: 250px; padding: 8px; border-left: 1px solid #999; background-color: #e6e6e6; } .label { width: 50%; font-size: 10pt;; } .time-label { font-size: 10pt;; } .select { background-color: #fff; border: 1px solid #999; border-radius: .25rem; transition: border .1s linear,background-color .1s linear; -webkit-transition: border .1s linear,background-color .1s linear; height: 32px; width: 120px; box-sizing: border-box; padding-left: 10px; color: #444; font-size: 12px; padding-right: 1.5em; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%23706E6B'%3e%3cpath d='M10,10 H90 L50,70'/%3E%3C/svg%3E"); background-size: 12px 12px; background-position: calc(100% - 12px) calc(50% + 2px); background-repeat: no-repeat; margin-bottom: 4px; width: 50% } .select:focus { outline: 0; border-color: #1589ee; background-color: #fff; -webkit-box-shadow: 0 0 3px #0070d2; box-shadow: 0 0 3px #0070d2 } .select::-ms-expand { display: none } .input_container { color: #444; height: 32px; width: 85pt; font-size: 18pt; } #preview-btn, #export-btn { background: #fff; border-radius: 4px; border: 1px solid #999; color: #444; cursor: pointer; height: 32px; width: 100%; margin-bottom: 4px; background-position: center right; background-repeat: no-repeat; background-size: 20px 20px; background-origin: content-box; } #preview-btn:disabled, #export-btn:disabled { color: #aaa; } #first-page-suffix, #full-pages-suffix { display: none; } .line { height: 40px; display: flex; flex-direction: row; align-items: baseline; } .times { display: flex; flex-direction: row; } .time { width: 50%; display: flex; flex-direction: column; text-align: center; } #export-time-line { font-size: 10pt; visibility: hidden; }