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;
}