数据表导出到 Excel 并将数字列格式化为货币答案

【问题标题】：Datatables export to Excel and format a numeric column as currency数据表导出到 Excel 并将数字列格式化为货币
【发布时间】：2017-12-06 13:29:28
【问题描述】：

我正在尝试将数值数据导出到 Excel。数字格式如下：

千位分组分隔符：“.”
小数点指示符：","
要显示的小数点数：“0”
前缀：“$”

并且页眉和页脚文本被格式化为粗体。

这是桌子：

<table id="idtablainforme_ventaporfamilia" class="table table-striped table-striped table-bordered nowrap dataTable">
    <thead>
        <tr>
            <th>
                <b>FAMILIA</b>
            </th>
            <th>
                <b>VENTA</b>
            </th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th><b>TOTAL</b></th>
            <th><b>$12.925.150</b></th>
        </tr>
    </tfoot>
    <tbody>
        <tr><td>CHEQUERA MUJER</td><td>$5.231.760</td></tr>
        <tr><td>CARTERA</td><td>$3.487.630</td></tr>
        <tr><td>BILLETERA MUJER</td><td>$2.155.120</td></tr>
        <tr><td>NECESER</td><td>$21.980</td></tr>
        <tr><td>COSMETIQUERA</td><td>$10.990</td></tr>
        <tr><td>SET DE VIAJE</td><td>$10.990</td></tr>
    </tbody>
</table>

这是我的尝试：

<script>
    $('#idtablainforme_ventaporfamilia').DataTable({
        destroy: true,
        "searching": false,
        "paging": false,
        "ordering": false,
        "info": false,
        "autowidth": false,
        columns: [
           { data: "1", render: $.fn.dataTable.render.text() },
           { data: "2", render: $.fn.dataTable.render.number('.', ',', 0, '$') }
        ],
        footerCallback: function (tfoot, data, start, end, display) {
            var $th = $(tfoot).find('th').eq(1);
            $th.text($.fn.dataTable.render.number('.', ',', 0, '$').display($th.text()))
        },
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'excel',
                footer: true,
                title: 'INFORME DE VENTAS POR FAMILIA',
                text: '<i class="fa fa-file-excel-o"></i>',
                titleAttr: 'Exporta a EXCEL',
            }
        ]
    });
</script>

但它不会转换数字数据，并且页眉和页脚文本没有格式化为粗体。它们在 Excel 中以字符串形式导出，除了值 21.98 $、10.99 $ 和 10.99 $（尽管它们应该是 $21.980、$10.990 和 $10.990），如下所示：

FAMILIA         VENTA
CHEQUERA MUJER  $5.494.310
CARTERA         $5.231.760
BILLETERA MUJER $2.155.120
NECESER         21.98  $
COSMETIQUERA    10.99  $
SET DE VIAJE    10.99  $
TOTAL           $12.925.150

【问题讨论】：

标签： jquery excel datatables

【解决方案1】：

出现在右侧的货币符号 ($) 是已知的 bug，DataTables 的创建者知道这一点。

至于其他的，我创建了demo

并基于此：

您正在使用美元符号预先填充金额（至少根据您发布的HTML 代码）；不要那样做！只需提供数值
页眉和页脚确实是粗体，无论是在显示中（下面屏幕截图的右侧）还是在导出到 excel 时；检查以确保 CSS 未被覆盖。

也就是说，check out for other formatting needs, that DataTables provides。

编辑：

我不知道为什么我发布的 JSFiddle 链接不包含其他库...但供您参考，以下屏幕截图准确显示了我重新构建您的案例中包含的 JS/CSS 库：

【讨论】：

【解决方案2】：

我发现，为了在您的产品中使用的所有数据表中获得一些所需的样式，如果您需要更自动化而不是更自动化，则需要对按钮进行一些编辑。必须不断地逐表设置。

这是因为这些设置尚未融入 API。因此，请务必跟踪您的编辑，以确保您知道当未来的更新来自数据表时该怎么做。

对于右边的$，具体来说，我在插件文件中做了如下编辑：

在第 567 行（在我的版本中）或围绕该行查找此代码块：

        '<numFmts count="6">'+
            '<numFmt numFmtId="164" formatCode="#,##0.00_-\ [$$-45C]"/>'+
            '<numFmt numFmtId="165" formatCode="&quot;£&quot;#,##0.00"/>'+
            '<numFmt numFmtId="166" formatCode="[$€-2]\ #,##0.00"/>'+
            '<numFmt numFmtId="167" formatCode="0.0%"/>'+
            '<numFmt numFmtId="168" formatCode="#,##0;(#,##0)"/>'+
            '<numFmt numFmtId="169" formatCode="#,##0.00;(#,##0.00)"/>'+
        '</numFmts>'+

在最后一个 numFmt 169 之后添加一个新条目：

'<numFmt formatCode="$#,##0.00_);[Red]($#,##0.00)" numFmtId="170"></numFmt>'

这种特殊格式会将 $ 放在数字的左侧，使用逗号作为千位分隔符，并将负数放在红色和括号中。如果您需要不同的格式，只需打开 Excel 并使用自定义格式选项找到您想要的格式，然后将它提供的格式复制并粘贴到“formatCode”属性中。

接下来，您需要制作它，以便访问您创建的这种新样式。所以找到结束标签：

'</cellXfs>'+

在此之前会有 67 行左右类似于：

'<xf numFmtId="1" fontId="0" fillId="0" borderId="0" applyFont="1" applyFill="1" applyBorder="1" xfId="0" applyNumberFormat="1"/>'+
'<xf numFmtId="2" fontId="0" fillId="0" borderId="0" applyFont="1" applyFill="1" applyBorder="1" xfId="0" applyNumberFormat="1"/>'+

在结束标记之前添加：

'<xf numFmtId="170" fontId="0" fillId="0" borderId="0" xfId="0" applyFont="1" applyFill="1" applyBorder="1" applyAlignment="1"></xf>'+

请注意，numFmtId="170" 与之前的 numFmts 条目匹配。现在，将该部分的开始标记数从 66 增加到 67：

'<cellXfs count="67">'+

变成：

'<cellXfs count="68">'+

现在您需要为所有美元格式的单元格自动拾取此功能：

找到：

var _excelSpecials = [

在该数组中，您会注意到一些可以找到各种正则表达式模式并应用样式编号的行。替换：

{ match: /^\-?\$[\d,]+.?\d*$/,  style: 57 }, // Dollars

用你的新款式编号

{ match: /^\-?\$[\d,]+.?\d*$/,  style: 67 }, // Dollars

该数字对应于您的样式在 cellXfs 列表中的位置。它是第 67 个（从 0 索引开始，因此项目 68 是索引 67）条目。

如果您需要使用数据表刷新浏览器并尝试导出，请构建。它应该适用于任何匹配格式的美元字段的新格式。

使用此方法，您可以将其他样式添加到 DataTables 提供的默认列表中。这不是最佳解决方案，但在 htm5 按钮 API 可以将这种更新作为障碍处理之前，它是我发现的最好方法，并且并不比在一天结束时拥有自定义 CSS 文件差多少。只需跟踪您的编辑以备将来使用，如果您对文件进行源代码控制，那么无论如何它都会为您执行此操作。

希望这会有所帮助！我仍在努力解决其他一些问题，但也许到目前为止我发现的内容对其他有类似问题的人有用。

【讨论】：

【解决方案3】：

我最终使用了格式输出数据 - 来自https://datatables.net/extensions/buttons/examples/html5/outputFormat-orthogonal.html 的导出选项

<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

$(document).ready(function() {
    $('#example').DataTable( {
        ajax: '../../../../examples/ajax/data/objects.txt',
        columns: [
            { data: 'name' },
            { data: 'position' },
            { data: 'office' },
            { data: 'extn' },
            { data: 'start_date' },
            { data: 'salary', render: function (data, type, row) {
                return type === 'export' ?
                    data.replace( /[$,]/g, '' ) :
                    data;
            } }
        ],
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'copyHtml5',
                exportOptions: { orthogonal: 'export' }
            },
            {
                extend: 'excelHtml5',
                exportOptions: { orthogonal: 'export' }
            },
            {
                extend: 'pdfHtml5',
                exportOptions: { orthogonal: 'export' }
            }
        ]
    } );
} );

【讨论】：

顺便说一句，如果有人偶然发现了这个答案 => 由于orthogonal 参数，我在 Excel-Export 中有错误/TypeError。就我而言，它有助于使用buttons-1.5.4 而不是buttons-1.2.4 :-(

【解决方案4】：

只需将样式设置为 64，它就会删除 $ 符号。

$('row[r!=2] c[r^="B"]', sheet).attr('s', '64');

【讨论】：

如果您没有明确定义数据列，这是最好的答案。

【解决方案5】：

在 Excel 中 - 用于构建基本 XLSX 文件的预定义字符串 b-html5.datatables.js

实际字符串格式错误..

<numFmt numFmtId="164" formatCode="#,##0.00_-\ [$$-45C]"/>

只需将 formatCode 替换为：

<numFmt numFmtId="164" formatCode="[$$-45C]\#,##0.00"/>

它适用于任何行的数据，包括页眉和页脚值。

【讨论】：