Export and import reports as JSON through custom toolbar options

27 Aug 20257 minutes to read

The Syncfusion® Pivot Table component allows users to save and restore report settings (also known as dataSourceSettings) through custom toolbar options. This functionality simplifies report management by allowing users to export settings as a JSON file and import them later to restore the Pivot Table configuration.

Customizing the Toolbar

To enable the export and import functionality, you can customize the Pivot Table’s toolbar using the toolbarTemplate property. Add Save and Open buttons to the toolbar as described below.

Save Button

The Save button is rendered as an anchor element, allowing users to download the current report (also known as dataSourceSettings) as a JSON file. When the Save button is clicked, the current report settings are retrieved using the getPersistData method. These settings are then converted into a JSON string and wrapped in a Blob object. A temporary anchor element is created, the Blob URL is assigned to its href attribute, and a click event is triggered to download a file named pivot.json. The downloaded file contains all pivot table settings, including configurations for rows, columns, values, and filters, allowing users to preserve their current setup for future use.

Open Button

The Open button is rendered as an input file element and allows users to select a JSON file containing report settings (also known as dataSourceSettings) from their file system. When a file is selected, the change event retrieves the report configuration from the JSON file and assigns it to the Syncfusion® Pivot Table component.

Here is an example demonstrating how to add Save and Open buttons to the toolbar and handle exporting and importing report configurations in the Syncfusion® Pivot Table component:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview';
import { Component, ViewChild, OnInit } from '@angular/core';
import { PivotView, ToolbarService, IDataSet } from '@syncfusion/ej2-angular-pivotview';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { enableRipple } from '@syncfusion/ej2-base';
import { Pivot_Data } from './datasource';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
enableRipple(false);

@Component({
  selector: 'app-container',
  template: `
    <div style="height: 480px;">
      <ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]="dataSourceSettings" height="450" showToolbar="true" [toolbarTemplate]='toolbarOptions'></ejs-pivotview>
    </div>
    <div id="template">
      <label for="files" class="e-btn-icon e-open-report e-icons icon-container">
        <input id="files" type="file" class="file-input" (change)="readBlob($event)" />
        <span class="icon-text">Open</span>
      </label>
      <a id="save" class="e-btn-icon e-save-report e-icons icon-container" (click)="saveData()">
        <span class="icon-text">Save</span>
      </a>
    </div>
  `,
  providers: [ToolbarService],
  standalone: true,
  imports: [
    PivotViewAllModule,
    PivotFieldListAllModule
  ]
})
export class AppComponent implements OnInit {
  public dataSourceSettings?: DataSourceSettingsModel;
  public gridSettings?: GridSettings;
  public toolbarOptions?: any;

  @ViewChild('pivotview')
  public pivotObj?: PivotView;

  ngOnInit(): void {
    this.gridSettings = {
      columnWidth: 140
    } as GridSettings;

    this.toolbarOptions = `#template`;

    this.dataSourceSettings = {
      enableSorting: true,
      columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }],
      rows: [{ name: 'Country' }, { name: 'Products' }],
      formatSettings: [{ name: 'Amount', format: 'C0' }],
      dataSource: Pivot_Data as IDataSet[],
      expandAll: false,
      values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
      filters: [{ name: 'Product_Categories', caption: 'Product Categories' }]
    };
  }

  saveData(): void {
    if(this.pivotObj)
    {
    const dataSource = JSON.parse(this.pivotObj?.getPersistData()).dataSourceSettings;
    const a: HTMLAnchorElement = document.createElement('a');
    const mime_type = 'application/octet-stream';
    a.setAttribute('download', 'pivot.JSON');
    a.href = 'data:' + mime_type + ';base64,' + btoa(JSON.stringify(dataSource) || '');
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    }
  }

  // Read and load data from JSON file
  readBlob(event: Event): void {
    const input = event.target as HTMLInputElement;
    const file = input.files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = (evt: ProgressEvent<FileReader>) => {
        if (evt.target?.readyState === FileReader.DONE) {
          const result = evt.target.result as string;
          this.pivotObj!.dataSourceSettings = JSON.parse(result);
        }
      };
      reader.readAsText(file);
    }
    input.value = '';
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

For more information and to access the quick start project, visit: GitHub Repository

See Also