[]
ActiveReportsJS Viewer supports following commonly used export formats:
To add the available export formats to the viewer -
<head>
section of the html, <head>
<!--export to Excel-->
<script type="text/javascript" src="scripts/ar-js-xlsx.js"></script>
<!--export to PDF-->
<script type="text/javascript" src="scripts/ar-js-pdf.js"></script>
<!--export to HTML-->
<script type="text/javascript" src="scripts/ar-js-html.js"></script>
</head>
<body>
section of the html, <body>
<div id="ARJSviewerDiv" style="height: 600px"></div>
</body>
<script>
section of the html. <script>
function load() {
const viewer = new ActiveReports.Viewer('#ARJSviewerDiv');
viewer.open('/reports/InvoiceList.rdlx-json');
viewer.availableExports = [];
}
</script>
You can show or hide the export formats in the export panel of the viewer, by using viewer.availableExports property. For example,
viewer.availableExports = [];
viewer.availableExports = [''];
viewer.availableExports = ['pdf'];
The following example shows the complete implementation.
<html>
<head>
<meta charset="utf-8" />
<title>ActiveReportsJS Viewer: Exporting</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/ar-js-viewer.css" />
<script type="text/javascript" src="scripts/ie-polyfills.js"></script>
<script type="text/javascript" src="scripts/ar-js-core.js"></script>
<script type="text/javascript" src="scripts/ar-js-viewer.js"></script>
<!--scripts to export-->
<script type="text/javascript" src="scripts/ar-js-xlsx.js"></script>
<script type="text/javascript" src="scripts/ar-js-pdf.js"></script>
<script type="text/javascript" src="scripts/ar-js-html.js"></script>
</head>
<body onload="load()">
<div id="ARJSviewerDiv" style="height: 600px"></div>
<script>
function load() {
const viewer = new ActiveReports.Viewer('#ARJSviewerDiv');
viewer.open('/reports/InvoiceList.rdlx-json');
viewer.availableExports = [];
}
</script>
</body>
</html>
Refer to Preset Export Pane topic for information on setting defaults in the export pane.
You can create your own custom button on the toolbar with export functionality if you do not want to use the default export from the sidebar of the viewer.
To create a custom button, define the button and call the viewer.export() method with export format and export settings as arguments.
The following example shows the complete implementation.
<html>
<head>
<title>Export from custom buttons added on viewer's toolbar</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/ar-js-viewer.css" />
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css"/>
<script type="text/javascript" src="scripts/ie-polyfills.js"></script>
<script type="text/javascript" src="scripts/ar-js-core.js"></script>
<script type="text/javascript" src="scripts/ar-js-viewer.js"></script>
<script type="text/javascript" src="scripts/ar-js-xlsx.js"></script>
<script type="text/javascript" src="scripts/ar-js-pdf.js"></script>
<script type="text/javascript" src="scripts/ar-js-html.js"></script>
<script>
var viewer;
var pdfExportButton;
var xlsxExportButton;
var htmlExportButton;
</script>
</head>
<body onload="load()">
<div id="ARJSviewerDiv" style="height: 600px ;width: 100%"></div>
<script>
function load() {
viewer = new ActiveReports.Viewer('#ARJSviewerDiv');
//add Excel and HTML export icons as svg
var svgExcelLogo = atob('PHN2ZyB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCA4OC4wMzAwNjYgODYiIHZlcnNpb249IjEuMSIgaWQ9InN2ZzIiIGlua3NjYXBlOnZlcnNpb249IjAuNDguMy4xIHI5ODg2IiBzb2RpcG9kaTpkb2NuYW1lPSJ3b3JkLnN2ZyI+IDxtZXRhZGF0YSBpZD0ibWV0YWRhdGExMjYiPiA8cmRmOlJERj4gPGNjOldvcmsgcmRmOmFib3V0PSIiPiA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gPGRjOnR5cGUgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4gPGRjOnRpdGxlPjwvZGM6dGl0bGU+IDwvY2M6V29yaz4gPC9yZGY6UkRGPiA8L21ldGFkYXRhPiA8ZGVmcyBpZD0iZGVmczEyNCIgLz4gPHNvZGlwb2RpOm5hbWVkdmlldyBwYWdlY29sb3I9IiNmZmZmZmYiIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiBib3JkZXJvcGFjaXR5PSIxIiBvYmplY3R0b2xlcmFuY2U9IjEwIiBncmlkdG9sZXJhbmNlPSIxMCIgZ3VpZGV0b2xlcmFuY2U9IjEwIiBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMCIgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxMjgwIiBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSI5NjAiIGlkPSJuYW1lZHZpZXcxMjIiIHNob3dncmlkPSJmYWxzZSIgaW5rc2NhcGU6em9vbT0iMS4wOTA1OTgzIiBpbmtzY2FwZTpjeD0iMzQ0Ljg5NDQyIiBpbmtzY2FwZTpjeT0iNTMuNzUiIGlua3NjYXBlOndpbmRvdy14PSIwIiBpbmtzY2FwZTp3aW5kb3cteT0iMCIgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMSIgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ic3ZnMiIgZml0LW1hcmdpbi10b3A9IjAiIGZpdC1tYXJnaW4tbGVmdD0iMCIgZml0LW1hcmdpbi1yaWdodD0iMCIgZml0LW1hcmdpbi1ib3R0b209IjAiIC8+IDxwYXRoIGQ9Im0gNDYuMDQsMCA1Ljk0LDAgYyAwLDIuNjcgMCw1LjMzIDAsOCAxMC4wMSwwIDIwLjAyLDAuMDIgMzAuMDMsLTAuMDMgMS42OSwwLjA3IDMuNTUsLTAuMDUgNS4wMiwwLjk2IDEuMDMsMS40OCAwLjkxLDMuMzYgMC45OCw1LjA2IC0wLjA1LDE3LjM2IC0wLjAzLDM0LjcxIC0wLjAyLDUyLjA2IC0wLjA1LDIuOTEgMC4yNyw1Ljg4IC0wLjM0LDguNzUgLTAuNCwyLjA4IC0yLjksMi4xMyAtNC41NywyLjIgLTEwLjM2LDAuMDMgLTIwLjczLC0wLjAyIC0zMS4xLDAgMCwzIDAsNiAwLDkgbCAtNi4yMSwwIEMgMzAuNTMsODMuMjMgMTUuMjYsODAuNjcgMCw3OCAwLDU0LjY3IDAsMzEuMzQgMCw4LjAxIDE1LjM1LDUuMzQgMzAuNywyLjcxIDQ2LjA0LDAgeiIgaWQ9InBhdGgxMCIgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgc3R5bGU9ImZpbGw6IzIwNzI0NSIgLz4gPHBhdGggZD0ibSA1MS45OCwxMSBjIDExLDAgMjIsMCAzMywwIDAsMjEgMCw0MiAwLDYzIC0xMSwwIC0yMiwwIC0zMywwIDAsLTIgMCwtNCAwLC02IDIuNjcsMCA1LjMzLDAgOCwwIDAsLTIuMzMgMCwtNC42NyAwLC03IC0yLjY3LDAgLTUuMzMsMCAtOCwwIDAsLTEuMzMgMCwtMi42NyAwLC00IDIuNjcsMCA1LjMzLDAgOCwwIDAsLTIuMzMgMCwtNC42NyAwLC03IC0yLjY3LDAgLTUuMzMsMCAtOCwwIDAsLTEuMzMgMCwtMi42NyAwLC00IDIuNjcsMCA1LjMzLDAgOCwwIDAsLTIuMzMgMCwtNC42NyAwLC03IC0yLjY3LDAgLTUuMzMsMCAtOCwwIDAsLTEuMzMgMCwtMi42NyAwLC00IDIuNjcsMCA1LjMzLDAgOCwwIDAsLTIuMzMgMCwtNC42NyAwLC03IC0yLjY3LDAgLTUuMzMsMCAtOCwwIDAsLTEuMzMgMCwtMi42NyAwLC00IDIuNjcsMCA1LjMzLDAgOCwwIDAsLTIuMzMgMCwtNC42NyAwLC03IC0yLjY3LDAgLTUuMzMsMCAtOCwwIDAsLTIgMCwtNCAwLC02IHoiIGlkPSJwYXRoNDgiIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiIHN0eWxlPSJmaWxsOiNmZmZmZmYiIC8+IDxwYXRoIGQ9Im0gNjMuOTgsMTcgYyA0LjY3LDAgOS4zMywwIDE0LDAgMCwyLjMzIDAsNC42NyAwLDcgLTQuNjcsMCAtOS4zMywwIC0xNCwwIDAsLTIuMzMgMCwtNC42NyAwLC03IHoiIGlkPSJwYXRoNTgiIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiIHN0eWxlPSJmaWxsOiMyMDcyNDUiIC8+IDxwYXRoIGQ9Im0gMjkuNjIsMjYuMzcgYyAyLjI2LC0wLjE2IDQuNTMsLTAuMyA2LjgsLTAuNDEgLTIuNjcsNS40NyAtNS4zNSwxMC45NCAtOC4wNywxNi4zOSAyLjc1LDUuNiA1LjU2LDExLjE2IDguMzIsMTYuNzYgLTIuNDEsLTAuMTQgLTQuODEsLTAuMjkgLTcuMjIsLTAuNDYgLTEuNywtNC4xNyAtMy43NywtOC4yIC00Ljk5LC0xMi41NiAtMS4zNiw0LjA2IC0zLjMsNy44OSAtNC44NiwxMS44NyAtMi4xOSwtMC4wMyAtNC4zOCwtMC4xMiAtNi41NywtMC4yMSAyLjU3LC01LjAzIDUuMDUsLTEwLjEgNy43LC0xNS4xIC0yLjI1LC01LjE1IC00LjcyLC0xMC4yIC03LjA0LC0xNS4zMiAyLjIsLTAuMTMgNC40LC0wLjI2IDYuNiwtMC4zOCAxLjQ5LDMuOTEgMy4xMiw3Ljc3IDQuMzUsMTEuNzggMS4zMiwtNC4yNSAzLjI5LC04LjI1IDQuOTgsLTEyLjM2IHoiIGlkPSJwYXRoNzIiIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiIHN0eWxlPSJmaWxsOiNmZmZmZmYiIC8+IDxwYXRoIGQ9Im0gNjMuOTgsMjggYyA0LjY3LDAgOS4zMywwIDE0LDAgMCwyLjMzIDAsNC42NyAwLDcgLTQuNjcsMCAtOS4zMywwIC0xNCwwIDAsLTIuMzMgMCwtNC42NyAwLC03IHoiIGlkPSJwYXRoOTAiIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiIHN0eWxlPSJmaWxsOiMyMDcyNDUiIC8+IDxwYXRoIGQ9Im0gNjMuOTgsMzkgYyA0LjY3LDAgOS4zMywwIDE0LDAgMCwyLjMzIDAsNC42NyAwLDcgLTQuNjcsMCAtOS4zMywwIC0xNCwwIDAsLTIuMzMgMCwtNC42NyAwLC03IHoiIGlkPSJwYXRoMTA4IiBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiBzdHlsZT0iZmlsbDojMjA3MjQ1IiAvPiA8cGF0aCBkPSJtIDYzLjk4LDUwIGMgNC42NywwIDkuMzMsMCAxNCwwIDAsMi4zMyAwLDQuNjcgMCw3IC00LjY3LDAgLTkuMzMsMCAtMTQsMCAwLC0yLjMzIDAsLTQuNjcgMCwtNyB6IiBpZD0icGF0aDExNCIgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgc3R5bGU9ImZpbGw6IzIwNzI0NSIgLz4gPHBhdGggZD0ibSA2My45OCw2MSBjIDQuNjcsMCA5LjMzLDAgMTQsMCAwLDIuMzMgMCw0LjY3IDAsNyAtNC42NywwIC05LjMzLDAgLTE0LDAgMCwtMi4zMyAwLC00LjY3IDAsLTcgeiIgaWQ9InBhdGgxMjAiIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiIHN0eWxlPSJmaWxsOiMyMDcyNDUiIC8+IDwvc3ZnPg==');
var svgHTMLLogo = atob('PHN2ZyB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAzMiAzMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzIgMzI7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+ICAuc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6IzE1N0VGQjt9IDwvc3R5bGU+PHRpdGxlPjwvdGl0bGU+PGRlc2M+PC9kZXNjPjxnIGlkPSJQYWdlLTEiPiA8ZyBpZD0iaWNvbi03Ni1kb2N1bWVudC1maWxlLWh0bWwiPiA8cGF0aCBpZD0iZG9jdW1lbnQtZmlsZS1odG1sIiBjbGFzcz0ic3QwIiBkPSJNMTksMjZ2MmMwLDEuMS0wLjksMi0yLDJIMmMtMS4xLDAtMi0wLjktMi0yVjVjMC0xLjEsMC45LTIsMi0yaDEwdjYgYzAsMS4xLDAuOSwyLDIsMmg1djJINmMtMS43LDAtMywxLjMtMywzdjdjMCwxLjcsMS4zLDMsMywzSDE5TDE5LDI2TDE5LDI2eiBNMTMsM3Y2YzAsMC42LDAuNSwxLDEsMWg1TDEzLDNMMTMsM3ogTTYsMTQgICAgYy0xLjEsMC0yLDAuOS0yLDJ2N2MwLDEuMSwwLjksMiwyLDJoMjNjMS4xLDAsMi0wLjksMi0ydi03YzAtMS4xLTAuOS0yLTItMkg2TDYsMTR6IE0yOSwyMnYxaC01di03aDF2NkgyOUwyOSwyMnogTTE0LDE3djZoMXYtNiBoMnYtMWgtNXYxSDE0TDE0LDE3eiBNMTAsMTl2LTNoMXY3aC0xdi0zSDd2M0g2di03aDF2M0gxMEwxMCwxOXogTTIwLjUsMTlMMTksMTZoLTAuNUgxOHY3aDF2LTVsMSwyaDAuNUgyMWwxLTJ2NWgxdi03aC0wLjVIMjIgTDIwLjUsMTlMMjAuNSwxOXoiLz48L2c+PC9nPjwvc3ZnPg=='); //pdfExportButton using iconCssClass
//pdfExportButton using iconCssClass
pdfExportButton = {
key: 'pdfExternalExportButton',
iconCssClass: 'mdi mdi-file',
text: "PDF Export",
title: "PDF Export",
checked: true,
enabled: true,
action: function (item) {
var settings = { title: 'Invoice List', userPassword: 'user_Pwd' };
var cancelCallback = function () {
return false;
}
viewer.export('pdf', settings, { cancel: cancelCallback })
.then(result => result.download("Exported_PDF"));
}
};
//xlsxExportButton using svg icon
xlsxExportButton = {
key: 'xlsxExternalExportButton',
icon: { type: 'svg', content: svgExcelLogo },
title: "Excel Export",
checked: true,
enabled: true,
action: function (item) {
var settings = { creator: 'Jack', password: 'Pwd' };
var cancelCallback = function () {
return false;
}
viewer.export('xlsx', settings, { cancel: cancelCallback })
.then(result => result.download("Exported_XLSX"));
}
};
//htmlExportButton using svg icon
htmlExportButton = {
key: 'htmlExternalExportButton',
icon: { type: 'svg', content: svgHTMLLogo },
title: "HTML Export",
checked: true,
enabled: true,
action: function (item) {
var settings = { autoPrint: 'true' };
var cancelCallback = function () {
return false;
}
viewer.export('html', settings, { cancel: cancelCallback })
.then(result => result.download("Exported_HTML"));
}
};
var Comic = {
name: 'Comic Sans MS',
source: 'fonts/comic.ttf',
};
/*Register specified fonts on exporting.
Makes export correct on machines where fonts are missing.*/
viewer.registerFont(Comic);
viewer.toolbar.addItem(pdfExportButton);
viewer.toolbar.addItem(xlsxExportButton);
viewer.toolbar.addItem(htmlExportButton);
viewer.toolbar.updateLayout({
default: ['pdfExternalExportButton', 'xlsxExternalExportButton', 'htmlExternalExportButton', '$navigation', '$history', '$fullscreen', '$split', '$print', '$refresh', '$galleymode', '$mousemode', '$split', '$continuousmode', '$singlepagemode', '$zoom', '$split'],
fullscreen: ['$navigation', '$fullscreen', 'print', 'galleymode'],
mobile: ['$refresh', '$mousetool']
});
// open rdlx-json file in viewer
viewer.open('/reports/InvoiceList.rdlx-json');
}
</script>
</body>
</html>
You can export reports without previewing by specifying the export format through code. You can also specify the export settings specific to each export type. Refer to Set Document Properties topic for more information.
The following code exports report to PDF format without displaying the report's preview.
function load() {
var ARJS = GC.ActiveReports.Core;
var PDF = GC.ActiveReports.PdfExport;
var onProgressCallback = function (pageCount) {
console.log(pageCount);
}
var settings = {
info: {
title: 'Invoice List',
author: 'John K',
}
}
var pageReport = new ARJS.PageReport();
pageReport.load('/reports/InvoiceList.rdlx-json')
.then(() => pageReport.run())
.then(pageDocument => PDF.exportDocument(pageDocument, settings, onProgressCallback))
.then(result => result.download('InvoiceList'));
}
The following code exports report to Excel format without displaying the report's preview.
function load() {
var ARJS = GC.ActiveReports.Core;
var PDF = GC.ActiveReports.XlsxExport;
var onProgressCallback = function (pageCount) {
console.log(pageCount);
}
var settings = {
info: {
creator: 'Jack'
}
}
var pageReport = new ARJS.PageReport();
pageReport.load('/reports/InvoiceList.rdlx-json')
.then(() => pageReport.run())
.then(pageDocument => Excel.exportDocument(pageDocument, settings, onProgressCallback))
.then(result => result.download('InvoiceList'));
}
The following code exports report to HTML format without displaying the report's preview.
function load() {
var ARJS = GC.ActiveReports.Core;
var HTML = GC.ActiveReports.HtmlExport;
var onProgressCallback = function (pageCount) {
console.log(pageCount);
}
var settings = {
autoPrint: true
}
var pageReport = new ARJS.PageReport();
pageReport.load('/reports/InvoiceList.rdlx-json')
.then(() => pageReport.run())
.then(pageDocument => HTML.exportDocument(pageDocument, settings, onProgressCallback))
.then(result => result.download('InvoiceList'));
}
Submit and view feedback for