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

时间:2017-12-06 13:29:28

标签: jquery excel datatables

我尝试将数字数据导出到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

4 个答案:

答案 0 :(得分:4)

右侧显示的货币符号($)是已知的bug,是DataTables的创建者所知道的。

至于其他事情,我创建了一个demo

基于此:

  • 您使用美元符号预先填充金额(至少根据您发布的HTML代码);不要那样做!只需提供数值

  • 页眉和页脚确实是粗体,都在显示屏中(下方屏幕右侧)和导出为ex​​cel;检查以确保不会覆盖CSS。

left side of the screnshot is Excel; right side is what's displayed on JSFiddle

那就是check out for other formatting needs, that DataTables provides

编辑:

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

JSFiddle

答案 1 :(得分:2)

我发现,为了获得您在产品中可能使用的所有数据表所需的一些样式,如果您需要更自动的东西,那么就按顺序编辑buttons.html.js必须不断地逐桌设置。

这是因为这些设置尚未烘焙到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”attr。

enter image description here

接下来,您需要创建它,以便您可以访问您创建的这种新样式。所以找到结束标记:

'</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文件更糟糕。只需跟踪您对未来的编辑,如果您控制文件,那么无论如何它都会为您完成。

希望这有帮助!我还在摔跤其他一些东西,但也许我到目前为止发现的东西对其他有类似问题的人都有用。

答案 2 :(得分:1)

我最终使用了格式输出数据-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' }
            }
        ]
    } );
} );

答案 3 :(得分:0)

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

$(&#39; row [r!= 2] c [r ^ =&#34; B&#34;]&#39;,sheet).attr(&#39; s&#39;,& #39; 64&#39);