Demos
Docs
API
More Samples
Download
Developer Guide
ActiveReportsJS Viewer
Export
V1
V1

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,
  • initialize the viewer component, and
  • add a div element to host the viewer.

The following example shows the complete implementation.

<head>
    <title>ActiveReportsJS Viewer: Exporting</title>
    <meta charset="utf-8" />

    <link rel="stylesheet" href="css/ar-js-viewer.css" />
    <script type="text/javascript" src="scripts/ie-polyfills.full.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 for Exporting-->
    <script type="text/javascript" src="scripts/ar-js-xlsx.js"></script> <!--export to Excel-->
    <script type="text/javascript" src="scripts/ar-js-pdf.js"></script>  <!--export to PDF-->
    <script type="text/javascript" src="scripts/ar-js-html.js"></script> <!--export to HTML-->
</head>
<body onload="load()">
    <div id="ARJSviewerDiv" style="height: 100%"></div>
    <script>
        function load() {
            const viewer = new ActiveReports.Viewer('#ARJSviewerDiv', { ShowAbout: true });
            viewer.open('/reports/InvoiceList.rdlx-json');
             // show or hide available export formats
            viewer.availableExports = ['pdf', 'xlsx']; // hides html export
        }
    </script>
</body>

Using custom button on ActiveReportsJS Viewer Toolbar

If you want to create your own custom button instead of the default export provided by the viewer, use viewer.export() method to pass the export format and settings on button click event. The following example shows complete implementation to export from the custom buttons added on the viewers's toolbar.

<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.full.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: 100% ;width: 100%"></div>
    <script>
        function load() {
            viewer = new ActiveReports.Viewer('#ARJSviewerDiv');

            //add Excel and HTML export icons as svg
            var svgExcelLogo = '<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="24" height="24" viewBox="0 0 88.030066 86" version="1.1" id="svg2" inkscape:version="0.48.3.1 r9886" sodipodi:docname="word.svg"> <metadata id="metadata126"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <dc:title></dc:title> </cc:Work> </rdf:RDF> </metadata> <defs id="defs124" /> <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1280" inkscape:window-height="960" id="namedview122" showgrid="false" inkscape:zoom="1.0905983" inkscape:cx="344.89442" inkscape:cy="53.75" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" inkscape:current-layer="svg2" fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0" /> <path d="m 46.04,0 5.94,0 c 0,2.67 0,5.33 0,8 10.01,0 20.02,0.02 30.03,-0.03 1.69,0.07 3.55,-0.05 5.02,0.96 1.03,1.48 0.91,3.36 0.98,5.06 -0.05,17.36 -0.03,34.71 -0.02,52.06 -0.05,2.91 0.27,5.88 -0.34,8.75 -0.4,2.08 -2.9,2.13 -4.57,2.2 -10.36,0.03 -20.73,-0.02 -31.1,0 0,3 0,6 0,9 l -6.21,0 C 30.53,83.23 15.26,80.67 0,78 0,54.67 0,31.34 0,8.01 15.35,5.34 30.7,2.71 46.04,0 z" id="path10" inkscape:connector-curvature="0" style="fill:#207245" /> <path d="m 51.98,11 c 11,0 22,0 33,0 0,21 0,42 0,63 -11,0 -22,0 -33,0 0,-2 0,-4 0,-6 2.67,0 5.33,0 8,0 0,-2.33 0,-4.67 0,-7 -2.67,0 -5.33,0 -8,0 0,-1.33 0,-2.67 0,-4 2.67,0 5.33,0 8,0 0,-2.33 0,-4.67 0,-7 -2.67,0 -5.33,0 -8,0 0,-1.33 0,-2.67 0,-4 2.67,0 5.33,0 8,0 0,-2.33 0,-4.67 0,-7 -2.67,0 -5.33,0 -8,0 0,-1.33 0,-2.67 0,-4 2.67,0 5.33,0 8,0 0,-2.33 0,-4.67 0,-7 -2.67,0 -5.33,0 -8,0 0,-1.33 0,-2.67 0,-4 2.67,0 5.33,0 8,0 0,-2.33 0,-4.67 0,-7 -2.67,0 -5.33,0 -8,0 0,-2 0,-4 0,-6 z" id="path48" inkscape:connector-curvature="0" style="fill:#ffffff" /> <path d="m 63.98,17 c 4.67,0 9.33,0 14,0 0,2.33 0,4.67 0,7 -4.67,0 -9.33,0 -14,0 0,-2.33 0,-4.67 0,-7 z" id="path58" inkscape:connector-curvature="0" style="fill:#207245" /> <path d="m 29.62,26.37 c 2.26,-0.16 4.53,-0.3 6.8,-0.41 -2.67,5.47 -5.35,10.94 -8.07,16.39 2.75,5.6 5.56,11.16 8.32,16.76 -2.41,-0.14 -4.81,-0.29 -7.22,-0.46 -1.7,-4.17 -3.77,-8.2 -4.99,-12.56 -1.36,4.06 -3.3,7.89 -4.86,11.87 -2.19,-0.03 -4.38,-0.12 -6.57,-0.21 2.57,-5.03 5.05,-10.1 7.7,-15.1 -2.25,-5.15 -4.72,-10.2 -7.04,-15.32 2.2,-0.13 4.4,-0.26 6.6,-0.38 1.49,3.91 3.12,7.77 4.35,11.78 1.32,-4.25 3.29,-8.25 4.98,-12.36 z" id="path72" inkscape:connector-curvature="0" style="fill:#ffffff" /> <path d="m 63.98,28 c 4.67,0 9.33,0 14,0 0,2.33 0,4.67 0,7 -4.67,0 -9.33,0 -14,0 0,-2.33 0,-4.67 0,-7 z" id="path90" inkscape:connector-curvature="0" style="fill:#207245" /> <path d="m 63.98,39 c 4.67,0 9.33,0 14,0 0,2.33 0,4.67 0,7 -4.67,0 -9.33,0 -14,0 0,-2.33 0,-4.67 0,-7 z" id="path108" inkscape:connector-curvature="0" style="fill:#207245" /> <path d="m 63.98,50 c 4.67,0 9.33,0 14,0 0,2.33 0,4.67 0,7 -4.67,0 -9.33,0 -14,0 0,-2.33 0,-4.67 0,-7 z" id="path114" inkscape:connector-curvature="0" style="fill:#207245" /> <path d="m 63.98,61 c 4.67,0 9.33,0 14,0 0,2.33 0,4.67 0,7 -4.67,0 -9.33,0 -14,0 0,-2.33 0,-4.67 0,-7 z" id="path120" inkscape:connector-curvature="0" style="fill:#207245" /> </svg>';
            var svgHTMLLogo = '<svg xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve" width="24" height="24"><style type="text/css">  .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#157EFB;} </style><title></title><desc></desc><g id="Page-1"> <g id="icon-76-document-file-html"> <path id="document-file-html" class="st0" d="M19,26v2c0,1.1-0.9,2-2,2H2c-1.1,0-2-0.9-2-2V5c0-1.1,0.9-2,2-2h10v6 c0,1.1,0.9,2,2,2h5v2H6c-1.7,0-3,1.3-3,3v7c0,1.7,1.3,3,3,3H19L19,26L19,26z M13,3v6c0,0.6,0.5,1,1,1h5L13,3L13,3z M6,14    c-1.1,0-2,0.9-2,2v7c0,1.1,0.9,2,2,2h23c1.1,0,2-0.9,2-2v-7c0-1.1-0.9-2-2-2H6L6,14z M29,22v1h-5v-7h1v6H29L29,22z M14,17v6h1v-6 h2v-1h-5v1H14L14,17z M10,19v-3h1v7h-1v-3H7v3H6v-7h1v3H10L10,19z M20.5,19L19,16h-0.5H18v7h1v-5l1,2h0.5H21l1-2v5h1v-7h-0.5H22 L20.5,19L20.5,19z"/></g></g></svg>';

            //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>

Without using viewer (One-Touch Export)

You can also export reports and control export behavior without previewing, by specifying the export format and settings through code.

PDF

The following code specifies export settings for PDF.

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',
                    subject: 'This is the Invoice List',
                    author: 'John K',
                    keywords: 'PDF; import; export'
                },
                security:
                {
                    userPassword: 'user_Pwd',
                    ownerPassword: 'owner_Pwd',
                    permissions: {
                        printing: 'lowResolution',
                        modifying: true,
                        annotating: true,
                        copying: true,
                        contentAccessibility: false,
                        documentAssembly: false
                    }
                },
                fonts: [

                    {
                        name: 'SimSun-ExtB',
                        source: '/fonts/simsunb.ttf'
                    },
                    {
                        name: 'Matura MT Script Capitals',
                        source: '/fonts/MATURASC.TTF',
                    },
                    {
                        name: 'Stencil',
                        source: '/fonts/STENCIL.ttf'
                    }
                ]

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

        }

Note:

  • The default PDF Version (1.3) allows setting only 4 base types of permissions: printing, modifying, copying, and annotating. All other permissions need PDF 1.4+.
  • Document assembly is always displayed as "Not allowed" in the Adobe Acrobat Reader (and possibly in other reader applications), as this application does not allow combining documents at all. The Adobe Acrobat should show the real state of assembly permission, see this thread.
Description of PDF export settings
Title - title of the document.
Author - name of the author that appears in the document properties of the viewer application.
Keywords - keywords associated with the document.
Subject - subject of the document.
User Password - the user password that can be entered in the reader. If this value is left empty, the user will not be prompted for a password, however the user will be restricted by the specified permissions.
Owner Password - the owner password that can be entered in the reader that permits full access to the document regardless of the specified user permissions.
Allow Printing - allow printing of the document in Low or High resolution.
Allow Copying - allow content copy from the document.
Allow Modifying - allow editing in the document.
Allow Annotating - allow adding or editing annotations.
Allow Content Accessibility - allow text extraction or accessibility.
Allow Document Assembly - allow combining PDF documents.
PDF Version - allow setting PDF version - 1.3, 1.4, 1.5, 1.6, 1.7, and 1.7ext3.
Print on Open - indicates whether the document should be printed after open.
File Name - name of the exported PDF document.

Excel

The following code specifies export settings for Excel.

function load() {
            var ARJS = GC.ActiveReports.Core;
            var PDF = GC.ActiveReports.XlsxExport;

            var onProgressCallback = function (pageCount) {
                console.log(pageCount);
            }

            var settings = {
                info: {
                    creator: 'Jack'
                },
                sheetName: 'Sheet_Details',
                pageSettings: {
                    size:'A4',
                    orientation: 'landscape'
                },
                password: 'password'
            }
            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'));
        }
Description of Excel export settings
Author - name of the author that appears in the document properties of the viewer application.
Orientation - orientation of the Excel document - Portrait or Landscape.
Sheet Name - name of the Excel document or sheet.
Password - password to open the Excel document.
File Name - name of the exported Excel document.

HTML

The following code specifies export settings for HTML.

function load() {
            var ARJS = GC.ActiveReports.Core;
            var HTML = GC.ActiveReports.HtmlExport;

            var onProgressCallback = function (pageCount) {
                console.log(pageCount);
            }

            var settings = {
                autoPrint: true,
                multiPage: true,
                renderOptions: {
                    galleyMode: true //property available only through API
                }
            }

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

        }
Description of HTML export settings
Title - title of the document.
Save as Archive - save the exported html as an archive file.
Print on Open - indicates whether the document should be printed on opening.
File Name - name of the exported HTML document.

Limitations

PDF

  • PDF Print Presets are not available.
  • PDF/A format is not supported.
  • Watermarks can not be added.
  • No fonts fallback property to locate missing glyphs.
  • Only JPG and PNG images can be exported. Gif, bmp, emf, tiff, wmf are not exported.
  • Vertical text is not supported.
  • TextDecoration - Overline is not supported.

Excel

  • Slanted lines are not supported.

HTML

  • HTML is not the best format for printing. Use other exports instead.

The following table lists the properties that are not supported either in PDF or Excel export.

Properties Support in PDF Support in Excel
Report - Bookmark Y N
TextBox - CharacterSpacing Y N
TextBox - LineSpacing N N
Image - Alignment Y N
Image - Action Y N
Image - BackgroundRepeat N N
Image - Sizing N Y
Shape - RoundingRadius Y N
Shape - Style Y N
Table - AutoMergeMode N N
Table - WritingMode N N
Line - LineWidth Y N
Subreport - SubstituteThemesOnSubreport N N
Tablix - WritingMode N N