Print report

To print a report in the Bold Reports^® ASP.NET Web Forms 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 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.

<div style="height: 650px;width: 950px;min-height:404px;">
    <Bold:ReportViewer runat="server" ID="viewer"
        ReportServiceUrl="/api/ReportViewer"
        ReportPath="~/Resources/sales-order-detail.rdl"
        PrintMode="true">
    </Bold:ReportViewer>
</div>

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 Report Viewer PrintOption property to NewTab. By default, the Report Viewer shows the print dialog in the same page.

<div style="height: 650px;width: 950px;min-height:404px;">
    <Bold:ReportViewer runat="server" ID="viewer"
        ReportServiceUrl="/api/ReportViewer"
        ReportPath="~/Resources/sales-order-detail.rdl"
        PrintMode="true"
        PrintOption="NewTab">
    </Bold:ReportViewer>
</div>

The pop-up blocker should 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 Report Viewer, set the page-settings property to change the page setup properties.

The following code example illustrates how to set page orientation and paper size in the Report Viewer for client side.

<div style="height: 650px;width: 950px;min-height:404px;">
    <Bold:ReportViewer runat="server" ID="viewer"
        ReportServiceUrl="/api/ReportViewer"
        ReportPath="~/Resources/sales-order-detail.rdl">
    </Bold:ReportViewer>
</div>

The following code example illustrates how to set page orientation and paper size in your application’s Page_Load() function.

protected void Page_Load(object sender, EventArgs e)
{
    this.viewer.PageSettings = new BoldReports.Models.ReportViewer.PageSettings();
    this.viewer.PageSettings.Orientation = BoldReports.ReportViewerEnums.Orientation.Landscape;
    this.viewer.PageSettings.PaperSize = BoldReports.ReportViewerEnums.PaperSize.Letter;
}

How do I set the report margins?

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

The following code example illustrates how to set report margin in the Report Viewer for client side.

<div style="height: 650px;width: 950px;min-height:404px;">
    <Bold:ReportViewer runat="server" ID="viewer"
        ReportServiceUrl="/api/ReportViewer"
        ReportPath="~/Resources/sales-order-detail.rdl">
    </Bold:ReportViewer>
</div>

The following code example illustrates how to set report margin in your application’s Page_Load() function.

protected void Page_Load(object sender, EventArgs e)
{
    this.viewer.PageSettings = new BoldReports.Models.ReportViewer.PageSettings();
    this.viewer.PageSettings.Margins = new BoldReports.Models.ReportViewer.Margins();
    this.viewer.PageSettings.Margins.Top = 0.5;
    this.viewer.PageSettings.Margins.Bottom = 0.5;
    this.viewer.PageSettings.Margins.Right = 0.5;
    this.viewer.PageSettings.Margins.Left = 0.5;
}

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 Report Viewer page setup, use the Height and Width properties.

The following code example illustrates how to set page height and width in the Report Viewer for client side.

<div style="height: 650px;width: 950px;min-height:404px;">
    <Bold:ReportViewer runat="server" ID="viewer"
        ReportServiceUrl="/api/ReportViewer"
        ReportPath="~/Resources/sales-order-detail.rdl">
    </Bold:ReportViewer>
</div>

The following code example illustrates how to set page height and width in your application’s Page_Load() function.

protected void Page_Load(object sender, EventArgs e)
{
    this.viewer.PageSettings = new BoldReports.Models.ReportViewer.PageSettings();
    this.viewer.PageSettings.Height = 11.69;
    this.viewer.PageSettings.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 Report Viewer, set the EmbedImageData property to true in OnInitReportOptions, 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.

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

Replace the following code sample in the client-side.

<div style="height: 650px;width: 950px;min-height:404px;">
    <Bold:ReportViewer runat="server" ID="viewer"
        ReportServiceUrl="/api/ReportViewer"
        ReportPath="~/Resources/product-details.rdl">
    </Bold:ReportViewer>
</div>

In this tutorial, the product-details.rdl report is used, and you can download it from the Product Details report download.

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

<div style="height: 650px;width: 950px;min-height:404px;">
    <Bold:ReportViewer runat="server" ID="viewer"
        ReportServiceUrl="/api/ReportViewer"
        ReportPath="~/Resources/product-details.rdl"
        OnClientReportPrint="onReportPrint">
    </Bold:ReportViewer>
</div>

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

How do I show print progress?

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

To show print progress, follow these steps:

Set the OnClientPrintProgressChanged in Report Viewer initialization.
Implement the function and add code samples to show a custom message based on the print progress status, as in the following code snippet:

<div style="height: 650px;width: 950px;min-height:404px;">
    <Bold:ReportViewer runat="server" ID="viewer"
        ReportServiceUrl="/api/ReportViewer"
        ReportPath="~/Resources/product-details.rdl"
        OnClientPrintProgressChanged="onPrintProgressChanged">
    </Bold:ReportViewer>
</div>

<script type="text/javascript">
    function onPrintProgressChanged(args) {
        if (args.stage == "beginPrint") {
            $('#MainContent_viewer').ejWaitingPopup({ showOnInit: true, cssClass: "customStyle", text: "Preparing print data.. Please wait..." });
        }
        if (args.stage == "printStarted") {
            var popupObj = $('#MainContent_viewer').data('ejWaitingPopup');
            popupObj.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 popupObj = $('#MainContent_viewer').data('ejWaitingPopup');
                        popupObj.setModel({ text: "Preparing print data.." + progressPercentage + " % completed.. Please wait..." });
                    }
                }
            }
        }

        args.handled = true;
    }
</script>

How do I remove extra blank pages when printing?

To remove extra blank pages when printing from the 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 match 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.