Print in Js Viewer

Js Viewer provides several options for printing a report. This topic describes several ways in which a report can be printed in Js Viewer.

You can use two formats for printing from Js Viewer. Each section below provides code samples for both formats.

• ESM is the modern module format with such benefits as simple syntax, tree-shaking, etc. and is used by default.

• UMD module is usually used as a fallback in case the ES module does not work.

Click here to read about the Universal Module Definition (UMD) and ECMAScript Module (ESM) API documentation.

Print with Preview

Print report when the report is completely loaded in the viewer as in the following sample, based on the ESM format:

import {createViewer} from './jsViewer.min.js';
var viewer;
function loadViewer() {
    viewer = createViewer({
        element: '#viewerContainer',
        reportID: 'Report.rdlx',
        documentLoaded: () => viewer.print()
    });
}

Otherwise, you can use the print() method from the UMD module.

var viewer;
function loadViewer() {
    viewer = GrapeCity.ActiveReports.JSViewer.create({
        element: '#viewerContainer',
        reportID: 'Report.rdlx',
        documentLoaded: () => viewer.print()
    });
}

Print without Preview

Print report without previewing as in the ESM sample below. This is same as the default button in Js Viewer, but without showing report preview.

import {printReport} from './jsViewer.min.js';
printReport({ reportID:'Report.rdlx'});

This code sample, based on the UMD module, uses the 'global' print() method.

GrapeCity.ActiveReports.JSViewer.print({ reportID:'Report.rdlx'});

Preview Report and Print to PDF

Open the report and export it to PDF with PrintOnOpen parameter set to 'true'. In this case, the exported PDF opens in new window of the browser, and the print dialog is displayed. The sample, based on the ESM is as follows:

import {createViewer} from './jsViewer.min.js';
var viewer;
function loadViewer() {
    viewer = createViewer({
        element: '#viewerContainer',
        reportID: 'Report.rdlx',
        documentLoaded: () => viewer.export('Pdf', null, true, { PrintOnOpen: 'true' })
    });
}

Otherwise, use the code sample, based on the UMD module:

var viewer;
function loadViewer() {
    viewer = GrapeCity.ActiveReports.JSViewer.create({
        element: '#viewerContainer',
        reportID: 'Report.rdlx',
        documentLoaded: () => viewer.export('Pdf', null, true, { PrintOnOpen: 'true' })
    });
}

Print to PDF

Export the report to PDF without opening the report by using this ESM sample:

import {exportReport} from './jsViewer.min.js';
exportReport({
    reportID: 'Report.rdlx', exportType: 'Pdf', settings: { PrintOnOpen: 'true' },
    callback: (args) => { window.open(args) }
})

You can also export your report to PDF, using the 'global' export() method and enable the PrintOnOpen option. In this case, the report is not opened.

GrapeCity.ActiveReports.JSViewer.export({
    reportID: 'Report.rdlx', exportType: 'Pdf', settings: { PrintOnOpen: 'true' },
    callback: (args) => { window.open(args) }
})

See Also

Js Viewer API