DevExtreme PivotGrid导出时左侧面板筛选器表头不显示求助

默认情况下，DevExpress.excelExporter.exportPivotGrid不会自动导出左侧筛选器面板的表头内容，你需要手动在Excel工作表的对应位置添加这些表头文本。以下是修改后的代码，帮你实现这个需求：

function onExporting(e) {
    var workbook = new ExcelJS.Workbook();
    var worksheet = workbook.addWorksheet('Data');
    var grid = e.component;
    
    // 获取左侧筛选器面板的字段
    var filterFields = grid.getDataSource().fields().filter(field => field.area === 'filter');
    
    // 在Excel中添加筛选器表头（这里放在第1行，对应数据区域上方的位置）
    if(filterFields.length > 0) {
        // 设置表头样式，和默认导出的表头视觉对齐
        var headerStyle = {
            font: { bold: true },
            alignment: { vertical: 'middle', horizontal: 'left' },
            fill: { type: 'pattern', pattern: 'solid', fgColor: { argb: '#D3D3D3' } }
        };
        
        filterFields.forEach((field, index) => {
            // 写入筛选器字段名，按顺序横向排列
            var cell = worksheet.getCell(1, index + 1);
            cell.value = field.caption || field.dataField;
            cell.style = headerStyle;
        });
    }

    DevExpress.excelExporter.exportPivotGrid({
        component: grid,
        worksheet: worksheet,
        topLeftCell: { row: 4, column: 1 },
        keepColumnWidths: false
    }).then(function (cellRange) {
        // 可选：按需调整列宽，保证内容显示完整
        // worksheet.columns.forEach(col => col.width = 18);
    }).then(function () {
        workbook.xlsx.writeBuffer().then(function (buffer) {
            saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'Datas.xlsx');
        });
    });
    e.cancel = true;
}

关键说明： #

• 通过grid.getDataSource().fields().filter(field => field.area === 'filter')精准筛选出处于左侧筛选器区域的字段
• 配置和默认导出表头一致的样式，保证Excel文档的视觉统一性
• 筛选器表头默认放在第1行，你可以根据自己的布局需求调整行号和排列方式（比如改成纵向排列）

内容的提问来源于stack exchange，提问作者Balu