Demo
Docs
Theme Editor
API
More Samples
Download
Developer Guide
ActiveReportsJS Viewer
Export
v1.2.0
v2.0.0v1.2.0

Export

ActiveReportsJS Viewer supports following commonly used export formats:

  • PDF
  • Excel (.xlsx)
  • HTML

Using ActiveReportsJS Viewer Export pane

To add the available export formats to the viewer -

  • add references to the export scripts in the <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>
  • add a div element to host the viewer in the <body> section of the html,
    <body>
        <div id="ARJSviewerDiv" style="height: 600px"></div>
    </body>
  • initialize the viewer component in the <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,

  • to show all export types, use viewer.availableExports = [];
  • to hide all export types, use viewer.availableExports = [''];
  • to hide export formats other than PDF, use 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.

Using custom button on ActiveReportsJS Viewer Toolbar

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>

Without using viewer (One-Touch Export)

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.

PDF

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

Excel

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

HTML

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'));

        }