如何使用 DataTable 制作 Excel 报表？

Question

在我的项目中，我从数据库中获取数据并将其存储在数据中。从数据表中，我想使用FileExport DataTable将数据导出到Excel，但是Excel结果的报告与数据表中的数据相同。

我用这段代码来实现数据表：

$('#grid').DataTable({
                ajax: {
                    url: '@Url.Action("Binding", "ETCPSummaryReport")',
                    data: {
                        SCode : spesial,
                        divisioncode: $("#Division").val(),

                    },
                },
                searching: false,
                destroy: true,
                bPaginate: true,
                bLengthChange: false,
                bFilter: false,
                bInfo: false,
                bSort: false,
                responsive: true,
                bServerSide: true,
                bProcessing: true,
                dom: 'Bfrtip',
                buttons: [
                {
                    extend: 'excelHtml5',
                    title: 'Data export'
                }
                ],
                columns: [
                    { "title": "Name" },
                    { "title": "PAR" },
                    { "title": "Total" },
                    { "title": "TotalETCPPSR" },

                ],
                columnDefs: [
                    { visible: false, targets: 0 }
                ],
                order: [[0, 'asc']],
                displayLength: 25,
                drawCallback: function (settings) {
                    var api = this.api();
                    var rows = api.rows({ page: 'current' }).nodes();
                    var last = null;

                    api.column(0, { page: 'current' }).data().each(function (group, i) {
                        if (last !== group) {
                            $(rows).eq(i).before(
                                '<tr class="group"><td colspan="5">' + group + '</td></tr>'
                            );

                            last = group;
                        }
                    });
                }
            });

但我的报告中的输出是这样的，而我期望这样的表格：

Answer 1

$('#grid').DataTable({
            ajax: {
                url: '@Url.Action("Binding", "ETCPSummaryReport")',
                data: {
                    SCode : spesial,
                    divisioncode: $("#Division").val(),

                },
            },
            searching: false,
            destroy: true,
            bPaginate: true,
            bLengthChange: false,
            bFilter: false,
            bInfo: false,
            bSort: false,
            responsive: true,
            bServerSide: true,
            bProcessing: true,
            dom: 'Bfrtip',
            buttons: [
            {
                extend: 'excelHtml5',
                title: 'Data export'
            },
            {
                extend: 'excel', 
                text: 'Download Excel'
            }
            ],
            columns: [
                { "title": "Name" },
                { "title": "PAR" },
                { "title": "Total" },
                { "title": "TotalETCPPSR" },

            ],
            columnDefs: [
                { visible: false, targets: 0 }
            ],
            order: [[0, 'asc']],
            displayLength: 25,
            drawCallback: function (settings) {
                var api = this.api();
                var rows = api.rows({ page: 'current' }).nodes();
                var last = null;

                api.column(0, { page: 'current' }).data().each(function (group, i) {
                    if (last !== group) {
                        $(rows).eq(i).before(
                            '<tr class="group"><td colspan="5">' + group + '</td></tr>'
                        );

                        last = group;
                    }
                });
            }
        });

Answer 2

Excel 只能解析非常有限的一组 HTML 和 CSS。所以有些样式根本不起作用。

首先，您必须确保您的CSS 文件 包含在完全限定路径和完全限定域 中。这是因为当浏览器将 HTML 文件传递​​给 Excel 时，它存储在一个临时位置。但只有 HTML 文件存储在此位置，而不是所有包含的文件。因此，此 HTML 文件中的服务器相对链接将指向文件系统的某个位置，但不会指向您的样式表。您是否从 Excel 中收到警告取决于 Excel 版本，也可能分别取决于用户设置或组策略。

也许这已经解决了您的问题。但不要指望表格看起来与浏览器中的完全一样。颜色会起作用，但 Excel 有时会有一些奇特的格式化值的想法。绕过所有的陷阱可能是一项艰巨的工作。您可能需要使用mso-... CSS 样式来驯化 Excel。