When exporting AG Grid to Excel, you may want to allow the user select the location and name of the exported file.
You can do this with the standard HTML saveFilePicker, which lets you browse the local drives and select a location for the exported file.
Please check the browser compatibility of the HTML elements used to ensure they will work in the browsers you'd like to support:
https://developer.mozilla.org/en-US/docs/Web/API/FileSystemWritableFileStream#browser_compatibility
https://developer.mozilla.org/en-US/docs/Web/API/window/showSaveFilePicker#browser_compatibility
Please see this implemented here:
1. Open
https://plnkr.co/edit/mMoLkBLFlpW0So4s
2. Open the plunker in a full window using the little arrows button just above the preview. This will open the preview in a full browser tab and allow the saveFileDialog to open.
This is important because the plunker preview panel has security restrictions which prevent the saveFileDialog from opening. Opening the preview in a full window correctly models an actual production environment without the security limitations set by the plunker preview panel.
3. Click the button above the grid
4. Set a file name and location
5. Press ENTER
The grid will be exported in the location and with the name you've set in the saveFileDialog.
Notes:
1. We're creating an Excel export params object on the fly. If you're providing your own, then only set the fileName and exportMode properties on this params object using the values set by the saveFileDialog. Then provide the params object in the call to export the grid.
2. The example uses a single-worksheet export method - getDataAsExcel, documented here:
https://www.ag-grid.com/javascript-data-grid/grid-api/#reference-export-getDataAsExcel
If you'd like to export a file with multiple sheets, use the corresponding method - getMultipleSheetsAsExcel, documented here:
https://www.ag-grid.com/javascript-data-grid/grid-api/#reference-export-getMultipleSheetsAsExcel
3. You can use the same mechanism to export to CSV, only call the getDataAsCsv method instead:
https://www.ag-grid.com/javascript-data-grid/grid-api/#reference-export-getDataAsCsv
Comments
0 comments
Please sign in to leave a comment.