Category / Section
How to Disable Specific Export Formats in Angular Report Designer Preview
Published:
Updated:
This guide explains how to disable specific export formats (such as PPT and HTML) in the Bold Reports Angular Report Designer preview mode. Customizing export options helps streamline the user interface, ensures compliance with project requirements, and reduces clutter in the export menu.
Steps to Disable PPT and HTML Export Formats
Step 1: Configure the Report Designer Markup
In src/app/app.component.html
, add the <bold-reportdesigner>
element:
<bold-reportdesigner
id="designer"
[serviceUrl]="serviceUrl"
[previewOptions]="previewOptions"
style="position: absolute; width: 100%; height: 100%;">
</bold-reportdesigner>
Step 2: Define Export Settings in TypeScript
In src/app/app.component.ts
, configure the exportOptions
to exclude HTML and PPT formats using bitwise operators:
import { Component } from '@angular/core';
import { ReportViewer } from '@boldreports/javascript-controls';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public serviceUrl: string = 'https://demos.boldreports.com/services/api/ReportingAPI';
public previewOptions: any = {
exportSettings: {
exportOptions: ej.ReportViewer.ExportOptions.All & ~ej.ReportViewer.ExportOptions.Html & ~ej.ReportViewer.ExportOptions.PPT
}
};
}
Export Options Reference
Name | Description |
---|---|
All | Retrieves all available export options using the All property in ExportOptions. |
Retrieves the PDF export option using the Pdf property in ExportOptions. | |
Word | Retrieves the Word export option using the Word property in ExportOptions. |
Excel | Retrieves the Excel export option using the Excel property in ExportOptions. |
Html | Retrieves the HTML export option using the Html property in ExportOptions. |
PPT | Retrieves the PowerPoint export option using the PPT property in ExportOptions. |
CSV | Retrieves the CSV export option using the CSV property in ExportOptions. |
XML | Retrieves the XML export option using the XML property in ExportOptions. |
TXT | Retrieves the plain text export option using the TXT property in ExportOptions. |
CustomItems | Retrieves custom export options using the customItems property in ExportOptions. |
Step 3: Run and Verify the Application
- Start the Angular application using
ng serve --open
. - In the preview, open the export menu:
-
Before changes: All export formats (PDF, Excel, Word, HTML, PPT, etc.) are visible.
-
After changes: HTML and PPT options are removed from the export menu.
You can download a working sample application here: Angular Report Designer Sample.