Vue Common - Utils - excelExporter
exportDataGrid(options)
Module: excel_exporter
Parameters:
options:
This method requires ExcelJS v4+ to export data and FileSaver 2.0.1+ to save files.
You can call this method at any point in your application. In the example below, this method is called in the onExporting function that is executed before data is exported. The cancel parameter is enabled to prevent the built-in export. As a result, the DataGrid is exported to a single worksheet.
App.vue
- <template>
- <DxDataGrid ...
- @exporting="onExporting">
- <DxExport
- :enabled="true"
- />
- </DxDataGrid>
- </template>
- <script>
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import { DxDataGrid, DxExport } from 'devextreme-vue/data-grid';
- import { exportDataGrid } from 'devextreme/excel_exporter';
- import { Workbook } from 'exceljs';
- import saveAs from 'file-saver';
- export default {
- components: {
- DxDataGrid,
- DxExport
- },
- methods: {
- onExporting(e) {
- const workbook = new Workbook();
- const worksheet = workbook.addWorksheet('Main sheet');
- exportDataGrid({
- component: e.component,
- worksheet: worksheet
- }).then(function() {
- workbook.xlsx.writeBuffer()
- .then(function(buffer) {
- saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx');
- });
- });
- e.cancel = true;
- }
- }
- }
- </script>
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.