Articles in this section
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.
Pdf 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
  1. Start the Angular application using ng serve --open.
  2. In the preview, open the export menu:
  • Before changes: All export formats (PDF, Excel, Word, HTML, PPT, etc.) are visible.

    Export Menu Before Changes

  • After changes: HTML and PPT options are removed from the export menu.

    Export Menu After Changes

You can download a working sample application here: Angular Report Designer Sample.

See Also
Was this article useful?
Like
Dislike
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied