CODEWITHSUNDEEP
angulartypescriptdevextremedx-data-grid
KavyaArya
KavyaArya

Reputation: 61

Exporting data from Data Grid in Dev Extreme to excel file format and saving manually to a specific folder environment

I am exporting data from dxDataGrid by using a custom button to save in excel format which is working well. However, I would like to open File Explorer to save the excel file by opening File Explorer Dialog to choose a specific folder environment instead of automatically saving in default downloads folder.

Here's my code,

In HTML,

<button (click)="exportFile()">Export</button>
<dx-data-grid [dataSource]="dataList">.... </dx-data-grid>

In ts,

exportFile() {
    this.grid.export.enabled = true;
    this.grid.export.fileName = 'Report';
    this.grid.instance.exportToExcel(false); // false to export all row data
  }

Can you please advise how to open the File Explorer Dialog to manually save the file to a specific folder?

Thank you

Upvotes: 1

Views: 1902

Answers (1)

Anik Saha
Anik Saha

Reputation: 67

Use a Third-Party Library to Save the File

If you want more control over the download, such as allowing the user to trigger the "Save As" dialog, you can use a library like FileSaver.js to manually handle the saving of the file.

Install FileSaver.js: If you're using Angular CLI, you can install FileSaver.js via npm

npm install file-saver

Modify Your Code to Use FileSaver.js: First, import FileSaver.js

import { saveAs } from 'file-saver';

Then, after generating the Excel file with dxDataGrid, you can manually trigger the download

exportFile() {
  this.grid.instance.exportToExcel(false).then((data: Blob) => {
    // Use FileSaver.js to trigger the "Save As" dialog
    saveAs(data, 'Report.xlsx');
  });
}

Here, data is the Blob (binary large object) that represents the Excel file, and saveAs will trigger the "Save As" dialog to let the user choose the file location.

Upvotes: 0

Related Questions