Report Viewer SDK
Schedule Free Demo
Try it Free
Search results
Suggest a FeaturePDF

Print report

The Report Viewer provides print report option in the toolbar to print a copy of the report. 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, it will have the default values again. The default values for the Page Setup dialog is based on the report properties set in the design view.

View report in print mode

Print margins are displayed in the Print Layout only. To view the report in print mode by default, set the printMode property to true.

<bold-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"=
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    [printMode] = "isPrintMode">
</bold-reportviewer>
import { Component, ViewChild } from '@angular/core';
import { BoldReportsAngularModule } from '@boldreports/angular-reporting-components/src/core';

@Component({
    selector: 'ej-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;
    public isPrintMode: boolean;

    constructor() {

        this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportApi';
        this.reportPath = 'GroupingAgg.rdl';
        this.isPrintMode = true;

    }
}

By default, the Report Viewer renders the report in normal layout in which the print margins are not displayed.

Print in new page

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

<bold-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    [printOption] = "printOption">
</bold-reportviewer>
import { Component, ViewChild } from '@angular/core';
import { BoldReportsAngularModule } from '@boldreports/angular-reporting-components/src/core';

@Component({
    selector: 'ej-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;
    public printOption: any;

    constructor() {

        this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportApi';
        this.reportPath = 'GroupingAgg.rdl';
        this.printOption = ej.ReportViewer.PrintOptions.NewTab;

    }
}

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

Set page orientation and paper size

You can specify the print page paper size and orientation at client-side to change the page setup properties by setting the pageSettings property.

<bold-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    [printMode] = "isPrintMode"
    [pageSettings] = "pageSettings">
</bold-reportviewer>
import { Component, ViewChild } from '@angular/core';
import { BoldReportsAngularModule } from '@boldreports/angular-reporting-components/src/core';

@Component({
    selector: 'ej-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;
    public pageSettings: any;
    public isPrintMode: boolean;

    constructor() {
        this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportViewer';
        this.reportPath = 'GroupingAgg.rdl';
        this.isPrintMode = true;
        this.pageSettings =  {
                        orientation: ej.ReportViewer.Orientation.Portrait,
                        paperSize: ej.ReportViewer.PaperSize.A3,
                    };
    }
}

Set report margin

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

<bold-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    [printMode] = "isPrintMode"
    [pageSettings] = "pageSettings">
</bold-reportviewer>
import { Component, ViewChild } from '@angular/core';
import { BoldReportsAngularModule } from '@boldreports/angular-reporting-components/src/core';

@Component({
    selector: 'ej-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;
    public pageSettings: any;
    public isPrintMode: boolean;

    constructor() {
        this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportViewer';
        this.reportPath = 'GroupingAgg.rdl';
        this.isPrintMode = true;
        this.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.

Set page height and width

To set the height and width values to the report page setup, use the height and width properties.

<bold-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    [printMode] = "isPrintMode"
    [pageSettings] = "pageSettings">
</bold-reportviewer>
import { Component, ViewChild } from '@angular/core';
import { BoldReportsAngularModule } from '@boldreports/angular-reporting-components/src/core';

@Component({
    selector: 'ej-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;
    public pageSettings: any;
    public isPrintMode: boolean;

    constructor() {
        this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportViewer';
        this.reportPath = 'GroupingAgg.rdl';
        this.isPrintMode = true;
        this.pageSettings =  {
                        height: 2.69,
                        width: 28.27
                    };
    }
}

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

When the report has more images, the browser will send the report stream to the print dialog before the images are completely loaded. To load the print report stream with complete images, set the EmbedImageData property to true in OnInitReportOptions as shown in the following code.

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

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

<bold-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath">
</bold-reportviewer>
import { Component, ViewChild } from '@angular/core';
import { BoldReportsAngularModule } from '@boldreports/angular-reporting-components/src/core';

@Component({
    selector: 'ej-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;

    constructor() {
        this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportViewer';
        this.reportPath = 'GroupingAgg.rdl';
    }
}

In this tutorial, the Product Details.rdl report is used, and it can be downloaded from here.

External styles in report printing

While printing a report, the external styles used in the application overrides the printable page style and prints output with incorrect alignments. To avoid the external script overriding, set the isStyleLoad property to false, which will print the page using only the Report Viewer styles.

<bold-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    [locale]= "Remote"
    (reportPrint) = "onReportPrint($event)">
</bold-reportviewer>
import { Component, ViewChild } from '@angular/core';
import { BoldReportsAngularModule } from '@boldreports/angular-reporting-components/src/core';

@Component({
    selector: 'ej-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;

    constructor() {
        this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportViewer';
        this.reportPath = 'Product Details.rdl';
    }

    onReportPrint(event) {
         event.isStyleLoad = false;
    }
}

Show print progress

The Report Viewer provides events that help you show the progress information, when the printing process takes a long time to complete.

To show print progress, follow these steps:

  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 shown in the following code snippet.
<ej-ReportViewer id="ReportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    [locale]= "Remote"
    (printProgressChanged) = "onPrintProgressChanged($event)">
</ej-ReportViewer>
import { Component, ViewChild } from '@angular/core';
import { BoldReportsAngularModule } from '@boldreports/angular-reporting-components/src/core';

@Component({
    selector: 'ej-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;

    constructor() {
        this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportViewer';
        this.reportPath = 'Product Details.rdl';
    }

 onPrintProgressChanged(event) {
                if (event.stage === "beginPrint") {
                    console.log(event.stage);
                    //$('#viewer').ejWaitingPopup({ showOnInit: true, cssClass: "customStyle", text: "Preparing print data.. Please wait..." });
                }
                if (event.stage === "printStarted") {
                    console.log(event.stage);
                    //var popupObj1 = $('#viewer').data('ejWaitingPopup');
                    //popupObj1.hide();
                }
                else if (event.stage === "preparation") {
                    console.log(event.stage);
                    if (event.preparationStage === "dataPreparation") {
                        console.log(event.preparationStage);
                        console.log(event.totalPages);
                        console.log(event.currentPage);
                        //if (event.totalPages > 1 && event.currentPage > 1) {
                        //    var progressPercentage = Math.floor((event.currentPage / event.totalPages) * 100);
                        //    if (progressPercentage > 0) {
                        //        var popupObj2 = $('#viewer').data('ejWaitingPopup');
                        //        popupObj2.setModel({ text: "Preparing print data.." + progressPercentage + " % completed.. Please wait..." });
                       //     }
                       // }
                    }
                }

                event.handled = true;
            }
}

Remove empty spaces in printing

The extra blank page is created when the body of your report is too wide for your page. To make the report appear on a single page, all the content within the report body must fit on the physical page, and the body width should be as the following formula:

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

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