DevExtreme DataGrid and Chart - Export to a Single File (PDF, XLSX)

This example exports both the DevExtreme DataGrid and DevExtreme Chart to a single document (PDF or Excel).

To export components, this example implements a custom interface using DevExtreme Form and Popup components. Our pre-built UI allows you to configure settings such as page format/PDF orientation, and Chart image offset in Excel.

Implementation Details

1. Export DataGrid into an in-memory document using the component's built-in export methods: pdfExporter.exportDataGrid() and excelExporter.exportDataGrid().
2. Convert Chart to an image using a third-party library (for example, html-to-image). Insert the image into the in-memory document.
3. Save the document to the user's machine.

PDF

function addChartToPDF(pdfDoc, element, x, y, sourceW, sourceH) {
    // ...
    
    return htmlToImage.toPng(element, {
        cacheBust: true,
        backgroundColor: '#ffffff',
        skipFonts: true
    })
    .then(function (dataUrl) {
        pdfDoc.addImage(dataUrl, 'PNG', x, y, scaledW, scaledH);
    })
    // ...
}

function exportGridToPDF(pageSize, orientation, grid, chart) {
    var pdfDoc = new jsPDF(orientation, 'pt', pageSize.toLowerCase());
    // ...

    DevExpress.pdfExporter.exportDataGrid({
        jsPDFDocument: pdfDoc,
        // ...
    }).then(function () {
        var chartEl = chart.element()[0];
        return addChartToPDF(pdfDoc, chartEl, 50, 300, chartEl.scrollWidth, chartEl.scrollHeight);
    }).then(function () {
        pdfDoc.save('filePDF.pdf');
    })
    // ...
}

Excel

function exportGridToExcel(fileName, imageCol, imageRow, grid, chart) {
    var workbook = new ExcelJS.Workbook();
    var worksheet = workbook.addWorksheet('DataGrid');

    DevExpress.excelExporter.exportDataGrid({
        component: grid,
        worksheet: worksheet,
        autoFilterEnabled: true
    }).then(function (cellRange) {
        var chartEl = chart.element()[0];

        return htmlToImage.toPng(chartEl, {
            cacheBust: true,
            backgroundColor: '#ffffff',
            skipFonts: true
        }).then(function (dataUrl) {
            var imageId = workbook.addImage({ base64: dataUrl, extension: 'png' });
            worksheet.addImage(imageId, {
                tl: { col: imageCol, row: (cellRange.to && cellRange.to.row ? cellRange.to.row : 0) + imageRow },
                ext: { width: 600, height: 400 }
            });

            return workbook.xlsx.writeBuffer();
        })
        // ...
    }).then(function (buffer) {
        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), fileName + '.xlsx');
    })
    // ...
}

Files to Review

• Angular
  • app.component.html
  • app.component.ts
  • grid-export.ts
• React
  • App.tsx
  • useExportDashboard.ts
• Vue
  • HomeContent.vue
  • useExportDashboard.ts
• jQuery
  • index.html
  • index.js
  • export-utils.js
• ASP.NET Core
  • Index.cshtml

Documentation

• DataGrid - Export
• Chart - Export
• pdfExporter - exportDataGrid
• excelExporter - exportDataGrid

More Examples

• DataGrid - ExcelJS Cell Customization Demo
• DataGrid - PDF Cell Customization Demo

Does This Example Address Your Development Requirements/Objectives?

(you will be redirected to DevExpress.com to submit your response)