Print report

To print a report in the Bold Reports^® Angular 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 Angular 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.

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

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 Angular Report Viewer printOption property to NewTab. By default, the Report Viewer 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.

How do I set the page orientation and paper size?

To set the print page orientation and paper size in the Angular Report Viewer, set the pageSettings property on the client side to change the page setup 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 =  {
                        orientation: ej.ReportViewer.Orientation.Portrait,
                        paperSize: ej.ReportViewer.PaperSize.A3,
                    };
    }
}

How do I set the report margins?

To set margin values in the Angular Report Viewer 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.

How do I set the page height and width?

To set height and width values in the Angular Report Viewer 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 are considered as inches input.

How do I print a report with all its images?

To print a report with complete images in the Angular 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 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';
    }
}

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

<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;
    }
}

How do I show print progress?

To show print progress, handle the Angular 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 printProgressChanged 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:

<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;
            }
}

How do I remove extra blank pages when printing?

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