解决Bootstrap Table导出Excel时日期格式自动转换问题

Bootstrap Table在导出数据到Excel或CSV文件时，常常会遇到“5/10”这类字符串被Excel自动识别并转换为“10-May”等日期格式的问题。本文将详细介绍如何利用Bootstrap Table的exportFormatter功能，通过在导出值前添加单引号来强制Excel将特定列识别为文本，从而有效避免数据格式的自动转换，确保导出数据的准确性。

引言：Excel自动格式转换的困扰

在使用Bootstrap Table展示和导出数据时，我们经常会遇到一个恼人的问题：某些包含斜杠（/）的字符串，例如表示“5分之10”的“5/10”，在导出到Excel文件后，会被Excel自动识别并转换为日期格式，例如“10-May”。这不仅改变了数据的原始含义，也给数据分析和报告带来了不便。

问题根源：Excel的智能识别机制

Excel为了方便用户，内置了强大的数据类型识别功能。当它检测到单元格内容符合某种日期或时间模式时，即使原始内容是文本，它也会尝试将其转换为对应的日期或时间格式。对于“X/Y”这类字符串，Excel很容易将其误判为“月/日”或“日/月”的日期格式，从而导致自动转换。

解决方案：利用exportFormatter强制文本格式

要解决这个问题，最直接有效的方法是在数据导出时，明确告知Excel该单元格的内容应被视为文本。一种常用的技巧是在单元格内容前添加一个单引号（’）。这个单引号在Excel中是不可见的，但它会强制Excel将该单元格的所有内容都当作文本处理，不再进行自动格式转换。

Bootstrap Table提供了exportFormatter选项，允许我们为特定列定义一个在导出时才生效的格式化函数。这正是解决我们问题的关键。

示例代码修改

在您的Bootstrap Table配置中，找到需要防止格式转换的列（例如本例中的Enrolled列），并为其添加exportFormatter属性。

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: 'numEnrol',
title: 'Enrolled',
sortable: true,
formatter: (value, row, index, field) => {
return value + '/' + row.quota; // 用于页面显示的格式
},
// 新增：用于导出时的格式化
exportFormatter: (value, row, index) => {
const formattedValue = row.numEnrol + '/' + row.quota;
return "'" + formattedValue; // 在值前添加单引号，强制Excel识别为文本
}
},
]
});
},
error: function () {
alert("加载数据失败！");
}
});
}

代码解释：

1. formatter: 这个函数负责在网页上显示数据。它将numEnrol和quota字段组合成“5/10”的形式。
2. exportFormatter: 这是新添加的关键部分。
   • 它会在数据被导出到文件（CSV或Excel）之前执行。
   • 在函数内部，我们首先根据row.numEnrol和row.quota重新构建了我们希望导出的字符串，即”5/10″。
   • 最重要的是，我们在这个字符串前面加上了一个单引号：”‘” + formattedValue。当Excel打开包含’5/10的单元格时，它会将其视为纯文本，而不是尝试将其解析为日期。

深入理解与高级配置

Bootstrap Table的导出功能底层依赖于tableExport.jquery.plugin插件。该插件提供了更丰富的导出控制选项，您可以通过Bootstrap Table的exportOptions属性进行配置。

1. data-tableexport-cellformat属性

原始答案中提到了data-tableexport-cellformat=””属性。这个属性通常直接应用于HTML的<td>标签，告诉tableExport.jquery.plugin不要对该单元格的内容进行任何格式转换，保留其原始格式。然而，在Bootstrap Table的columns定义中直接添加这个HTML属性并不直观。exportFormatter是更符合Bootstrap Table编程范式且更实用的方法。

2. onCellHtmlData回调函数

如果需要更灵活地处理导出数据，或者需要对多个列进行统一的、复杂的导出前处理，可以考虑在exportOptions中使用onCellHtmlData回调函数。这个函数在每个单元格的数据被写入导出文件前触发，允许您修改其内容。

exportOptions: {
fileName: 'geElectiveReport_' + Date.now(),
onCellHtmlData: function(cell, row, col, data) {
// 假设 'Enrolled' 是第10列（索引为9）
// 或者通过列标题/field名称来判断
if (col === 9 && typeof data === 'string' && data.includes('/')) {
return "'" + data; // 强制添加单引号
}
return data; // 其他列保持不变
}
}

这种方法在处理多个类似问题列时非常有用，因为它可以在一个地方集中管理导出逻辑。

3. excelCellDataFormat: ‘@’

tableExport.jquery.plugin也支持通过excelCellDataFormat选项直接指定Excel单元格的格式。’@’代表文本格式。将其添加到exportOptions可以全局地将所有导出的单元格设置为文本格式，但这可能会影响到其他需要保持数字或日期格式的列。

exportOptions: {
fileName: 'geElectiveReport_' + Date.now(),
excelCellDataFormat: '@' // 全局将Excel单元格格式设为文本
}

请谨慎使用此选项，因为它会影响所有列。

注意事项

• 验证问题根源： 在实施解决方案前，建议先用文本编辑器（如Notepad++）打开导出的CSV或Excel文件。如果文件中的内容已经是“10-May”，则问题可能出在数据生成或formatter阶段。如果文件内容是“5/10”，而只有Excel打开后才变，那么问题确实是Excel的自动转换。
• 多列处理： 如果有多个列存在类似的自动转换问题，您可以为每个受影响的列添加exportFormatter，或者使用exportOptions中的onCellHtmlData回调