Print report

To print a report in the Bold Reports® JavaScript Report Viewer, click the print option in the toolbar. The page setup dialog allows you to set the paper size or other page setup properties. To see print margins, click Print Layout on the toolbar.

You can set values in the Page Setup dialog box for current session only. When you close the report and reopen it, the dialog has the default values again. The default values of the Page Setup dialog are based on the report properties set in the design view.

View report in print mode

The JavaScript Report Viewer displays print margins in the print layout only. To view the report in print mode by default, set the printMode property to true.

index.html
index.js
    <body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
    <div id="viewer" style="position: absolute; height: 100%; width: 100%;"></div>
    <script src="index.js"></script>
    </body>
$(function () {
    $("#viewer").boldReportViewer({
                    reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
                    reportPath: '~/Resources/docs/sales-order-detail.rdl',
                    printMode: true
                });
});

You can view the Web API service used in the preceding code in the Reporting Service GitHub location. For more information, see Samples and demos. By default, the Report Viewer renders report in normal layout in which the print margins are not displayed.

How do I open the print view in a new tab?

To open the print view in a new tab of the current browser, set the JavaScript Report Viewer printOption property to NewTab. By default, the Report Viewer shows the print dialog in the same page.

index.html
index.js
    <body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
    <div id="viewer" style="position: absolute; height: 100%; width: 100%;"></div>
    <script src="index.js"></script>
    </body>
$(function () {
    $("#viewer").boldReportViewer({
                    reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
                    reportPath: '~/Resources/docs/sales-order-detail.rdl',
					printMode: true,
                    printOption: ej.ReportViewer.PrintOptions.NewTab
                });
});

The pop-up blocker must be enabled for the page to open the print view in new tab.

How do I set the page orientation and paper size?

To set the print page orientation and paper size in the JavaScript Report Viewer, set the pageSettings property on the client side to change the page setup properties.

index.html
index.js
    <body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
    <div id="viewer" style="position: absolute; height: 100%; width: 100%;"></div>
    <script src="index.js"></script>
    </body>
$(function () {
    $("#viewer").boldReportViewer({
                    reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
                    reportPath: '~/Resources/docs/sales-order-detail.rdl',
					printMode: true,
                    pageSettings: {
                        orientation: ej.ReportViewer.Orientation.Landscape,
                        paperSize: ej.ReportViewer.PaperSize.Letter
                    }
                });
});

How do I set the report margins?

To set margin values in the JavaScript Report Viewer page setup, use the margins property and specify the value to top, right, bottom, and left.

index.html
index.js
    <body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
    <div id="viewer" style="position: absolute; height: 100%; width: 100%;"></div>
    <script src="index.js"></script>
    </body>
$(function () {
    $("#viewer").boldReportViewer({
                    reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
                    reportPath: '~/Resources/docs/sales-order-detail.rdl',
					printMode: true,
                    pageSettings: {
                        margins: {
                            top: 0.5,
                            right: 0.25,
                            bottom: 0.25,
                            left: 0.25
                        }
                    }
                });
});

The values set in the margin property is considered as inches input.

How do I set the page height and width?

To set height and width values in the JavaScript Report Viewer page setup, use the height and width properties.

index.html
index.js
    <body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
    <div id="viewer" style="position: absolute; height: 100%; width: 100%;"></div>
    <script src="index.js"></script>
    </body>
$(function () {
    $("#viewer").boldReportViewer({
                    reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
					reportPath: '~/Resources/docs/sales-order-detail.rdl',
                    printMode: true,
                    pageSettings: {
                        height: 11.69,
                        width: 8.27
                    }
                });
});

The values set in the height and width properties are considered as inches input.

How do I print a report with all its images?

To print a report with complete images in the JavaScript Report Viewer, set the EmbedImageData property to true in OnInitReportOptions of the Web API Report Service, as in the following code. When the report has many images, the browser can send the report stream to the print dialog before the images are completely loaded.

    [NonAction]
    public void OnInitReportOptions(ReportViewerOptions reportOption)
    {
        reportOption.ReportModel.EmbedImageData = true;
    }

Replace the following code sample in the client-side HTML file.

        <script type="text/javascript">
            $(function () {
                $("#viewer").boldReportViewer(
                    {
                        reportServiceUrl: "/api/PrintWithImages",
                        reportPath: '~/Resources/docs/product-details.rdl'
                    });
            });
        </script>

You can view the Web API service used in the preceding code in the Reporting Service GitHub location. For more information, see Samples and demos. This tutorial uses the product-details.rdl report. Download the Product Details report.

How do I stop external styles from affecting report printing?

To stop external application styles from overriding the printed page, set the isStyleLoad property to false so that the JavaScript Report Viewer prints the page with only its own styles. Without this setting, external styles in the application can override the printable page style and print the output with incorrect alignments.

        <script type="text/javascript">
            $(function () {
                $("#viewer").boldReportViewer(
                    {
                        reportServiceUrl: "/api/ReportViewer",
                        reportPath: '~/Resources/docs/product-details.rdl',
                        reportPrint: "onReportPrint"
                    });
            });

            function onReportPrint(args) {
                args.isStyleLoad = false;
            }
        </script>

How do I show print progress?

To show print progress, handle the JavaScript Report Viewer print progress event, which reports progress information when printing takes a long time to complete.

  1. Set the printProgressChanged in Report Viewer initialization.
  2. Implement the function and add code samples to show a custom message based on the print progress status as in the following code snippet:
index.html
index.js
    <body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
    <div id="viewer" style="position: absolute; height: 100%; width: 100%;"></div>
    <script src="index.js"></script>
    </body>
function onPrintProgressChanged(args) {
        if (args.stage === "beginPrint") {
            $('#viewer').ejWaitingPopup({ showOnInit: true, cssClass: "customStyle", text: "Preparing print data.. Please wait..." });
        }
        if (args.stage === "printStarted") {
            var popupObj1 = $('#viewer').data('ejWaitingPopup');
            popupObj1.hide();
        }
        else if (args.stage === "preparation") {
            console.log(args.stage);
            if (args.preparationStage === "dataPreparation") {
                console.log(args.preparationStage);
                console.log(args.totalPages);
                console.log(args.currentPage);
                if (args.totalPages > 1 && args.currentPage > 1) {
                    var progressPercentage = Math.floor((args.currentPage / args.totalPages) * 100);
                    if (progressPercentage > 0) {
                        var popupObj2 = $('#viewer').data('ejWaitingPopup');
                        popupObj2.setModel({ text: "Preparing print data.." + progressPercentage + " % completed.. Please wait..." });
                    }
                }
            }
        }

        args.handled = true;
    }

$(function () {
    $("#viewer").boldReportViewer({
                    reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
                    reportPath: '~/Resources/docs/product-details.rdl',
                    printProgressChanged: onPrintProgressChanged
                });
});

How do I remove extra blank pages when printing?

To remove extra blank pages when printing from the JavaScript Report Viewer, make sure that all the content within the report body fits on the physical page. An extra blank page is created when the body of your report is too wide for your page. The body width must be less than or equal to the following formula:

Body Width <= Page Width - (Left Margin + Right Margin)

For more details about removing the empty pages in the report while designing, refer to the knowledge base article of report page sizing.