DataTables导出Excel无法保留首尾空格的问题求助

你用<pre>标签解决了页面表格空格显示的问题，但导出Excel时首尾空格被自动去除，核心原因有两个：

• DataTables的Excel导出插件默认会对提取的文本做trim处理
• Excel默认会忽略文本型单元格的首尾空格（除非明确设置单元格格式为文本并保留空格）

以下是针对性的解决方法：

1. 自定义导出数据提取逻辑，禁止自动修剪 #

在Excel按钮的exportOptions中，通过format.body自定义单元格内容的提取方式，直接获取<pre>标签内的原始文本，不做任何修剪操作。

2. 强制Excel单元格为文本格式 #

在customize函数中，修改单元格属性，将单元格类型设为字符串（t="s"），确保Excel将内容识别为纯文本，不会自动过滤首尾空格。

修改后的完整代码 #

<table id="tbl" class="table table-bordered table-hover">
    <thead>
        <tr>
            @foreach (DataColumn column in Model.Columns)
            {
                <th class="bg-primary border-1 text-white">@column.ColumnName</th>  
            }
        </tr>
    </thead>
    <tbody>
        @foreach (DataRow row in Model.Rows)
        {
            <tr>
                @foreach (DataColumn column in Model.Columns)
                {
                    <td><pre>@row[column.ColumnName]</pre></td>
                }
            </tr>
        }
    </tbody>
</table>

<script>
$('#tbl').DataTable({
    paging: true,
    scrollX: true,
    language: {
        paginate: {
            first: 'First',
            previous: 'Previous',
            next: 'Next',
            last: 'Last'
        },
        Show: 'Show',
        lengthMenu: 'Show records',
        search: 'Search:',
        info: 'info',
        infoFiltered: 'infoFiltered'
    },
    dom: 'Bfrtip',
    buttons: [
        {
            extend: 'excel',
            text: 'Export a Excel',
            className: 'btn btn-primary',
            title: '@Model.Title.ToString()',
            filename: '@Model.Title.ToString()',
            // 自定义导出内容提取逻辑，直接读取pre内原始文本
            exportOptions: {
                format: {
                    body: function (data, row, column, node) {
                        return $(node).find('pre').text();
                    }
                }
            },
            customize: function (xlsx) {
                var sheet = xlsx.xl.worksheets['sheet1.xml'];
                var rows = $('row', sheet);

                // 处理表头：设置为文本类型+原有样式
                $(rows[0]).find('c').each(function () {
                    var cell = $(this);
                    cell.attr('s', '2');
                    cell.attr('t', 's');
                });

                // 处理数据行：设置文本类型+保留奇偶行样式
                rows.slice(1).each(function (rowIndex) {
                    $(this).find('c').each(function () {
                        var cell = $(this);
                        cell.attr('t', 's');
                        cell.attr('s', rowIndex % 2 === 1 ? '5' : '0');
                    });
                });
            }
        }]
});
</script>

关键说明 #

• exportOptions.format.body：跳过DataTables默认的文本提取逻辑，直接读取<pre>内的原始内容，避免被自动trim
• cell.attr('t', 's')：将单元格标记为字符串类型，告诉Excel这是纯文本内容，不要自动过滤首尾空格
• 保留了你原有的奇偶行样式设置，同时确保所有单元格都被识别为文本类型

这样导出的Excel文件就能完整保留数据的首尾空格了。

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