如何阻止Bootstrap Table导出后Excel自动转换日期格式？

我的Bootstrap Table中，"Enrolled"字段通过formatter生成5/10这样的格式（表示10人中有5人报名），但导出为.xls或.csv后，Excel会自动将其识别为日期格式，显示成10-May，而非原始的5/10。如何让导出时保留该字段的原始文本格式？

我的代码如下：

function loadTable() {
        $.ajax({
            type: "POST",
            url: "admin/oes/getReport",
            success: function (dataRaw) {
                var data = JSON.parse(dataRaw);
                
                $('#table').bootstrapTable('destroy');//re-initialize
                $('#table').bootstrapTable({
                    data: data.list,
                    pageNumber:1,
                    pagination: 'client',
                    pageSize: 50,
                    pageList: [20,50,100,200],
                    search: true,
                    exportTypes: ['csv','excel'],
                    exportOptions: {
                        fileName: 'geElectiveReport_' + Date.now()
                    },
                    columns: [{
                        field: 'sectionId',
                        title: 'Section ID',
                        sortable: true
                    }, {
                        field: 'programmeType',
                        title: 'Prog Type',
                        sortable: true
                    }, {
                        field: 'instructor',
                        title: 'Instructor',
                        sortable: true
                    }, {
                        field: 'module',
                        title: 'Module',
                        sortable: true
                    }, {
                        field: 'room',
                        title: 'Room',
                        sortable: true
                    }, {
                        field: 'week',
                        title: 'Week',
                        sortable: true
                    }, {
                        field: 'time',
                        title: 'Time',
                        sortable: true
                    }, {
                        field: 'mediumOfInstruction',
                        title: 'Medium of Instruction',
                        sortable: true
                    }, {
                        field: 'programmeNotAllow',
                        title: 'Programme not Allow',
                        sortable: true
                    }, {
                        field: 'numEnrol',
                        title: 'Enrolled',
                        sortable: true,
                        
                        formatter: (value, row, index, field) => {
                            return value + '/' + row.quota
                        }
                    },
                    ]
                });
            },
            error: function () {
                alert("");
            }
        });
    }

期望导出后Excel中显示5/10，而非10-May。

解决方案 #

方法1：通过onCellHtmlData回调统一处理导出内容 #

利用Bootstrap Table导出的onCellHtmlData回调，给目标字段添加英文单引号前缀，强制Excel将其识别为纯文本：

exportOptions: {
    fileName: 'geElectiveReport_' + Date.now(),
    onCellHtmlData: function(cell, row, col, data) {
        // 定位到Enrolled列（对应columns数组的第9个元素，索引从0开始）
        if (col === 9) {
            // 单引号前缀会让Excel忽略自动格式转换，且不会显示单引号
            return "'" + data;
        }
        return data;
    }
}

方法2：使用导出专用的exportFormatter #

如果不想在页面显示时带单引号，仅在导出时处理，可以给Enrolled列添加exportFormatter：

{
    field: 'numEnrol',
    title: 'Enrolled',
    sortable: true,
    formatter: (value, row, index, field) => {
        return value + '/' + row.quota;
    },
    // 仅在导出时添加单引号前缀
    exportFormatter: (value, row, index, field) => {
        return "'" + value + '/' + row.quota;
    }
}

方法3：CSV格式的额外处理（可选） #

针对CSV导出，也可以用双引号包裹内容，避免被解析为日期：

exportOptions: {
    fileName: 'geElectiveReport_' + Date.now(),
    onCellHtmlData: function(cell, row, col, data) {
        if (col === 9) {
            // CSV中双引号包裹的内容会被当作纯文本
            return '"' + data + '"';
        }
        return data;
    }
}

原理说明 #

Excel默认会把x/y格式的字符串识别为月/日格式的日期，通过添加英文单引号前缀，Excel会将该内容标记为纯文本，不会触发自动格式转换；CSV格式下，双引号包裹内容也能避免解析器误判格式。

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