# Print in Js Viewer

JSViewer provides several options for printing a report. This topic describes several ways in which a report can be printed - with preview, without preview, preview report and print to PDF, or print to PDF.

## Content

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, ESM and UMD, 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](/activereportsnet/docs/developers/create-applications/js-viewer-application/jsviewer-api) 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:

```auto
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.

```auto
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.

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

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

```auto
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:

```auto
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:

```auto
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:

```auto
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.

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

>type=note
> **Note**:
>
> * For Section Reports, use **OnlyForPrint** instead of **PrintOnOpen** (for backward compatibility). For Page and RDLX reports (.rdlx), anyone of PrintOnOpen or OnlyForPrint can be used.
> * Use latest versions of Chrome, Firefox, and Chrome-based Edge for the described print features to work correctly.

## See Also

[Js Viewer API](/activereportsnet/docs/developers/create-applications/js-viewer-application/jsviewer-api)