zoukankan      html  css  js  c++  java
  • 使用tableExport.js直接导出web页面上的table

    1,需要导入两个js文件,一个tableExport.js,另一个是jquery.base64.js,前一个文件是导出数据和核心类库,后一个是为了避免导出中文时乱码的js文件,如果你导出的数据没有中文,可以不适用它。

    说明:只能对table标签进行操作

    2,导入以上两个js后,为下载按钮绑定事件,如下代码是最简单的导出配置

    //文件导出--------------------------
    $("#btnExport").click(function(){
            $('#stats_datatable').tableExport({
            type:'excel',
            escape:'false',
            fileName: 'UV_statistic_table'
            });
        });

    说明:stats_datatable是table标签的id

    <table class="table table-striped" id="stats_datatable" >
    <tbody id='uvnum'>
    </tbody>
    </table>

    3,可以查看tableExport.js文件相关详细配置,一下是源码中默认配置

      $.fn.extend({
            tableExport: function (options) {
                var defaults = {
                    consoleLog: false,
                    csvEnclosure: '"',
                    csvSeparator: ',',
                    csvUseBOM: true,
                    displayTableName: false,
                    escape: false,
                    excelstyles: ['border-bottom', 'border-top', 'border-left', 'border-right'],
                    fileName: 'tableExport',
                    htmlContent: false,
                    ignoreColumn: [],
                    ignoreRow: [],
                    jspdf: {
                        orientation: 'p',
                        unit: 'pt',
                        format: 'a4',
                        margins: { left: 20, right: 10, top: 10, bottom: 10 },
                        autotable: {
                            padding: 2,
                            lineHeight: 12,
                            fontSize: 8,
                            tableExport: {
                                onAfterAutotable: null,
                                onBeforeAutotable: null,
                                onTable: null
                            }
                        }
                    },
                    numbers: {
                        html: {
                            decimalMark: '.',
                            thousandsSeparator: ','
                        },
                        output: {
                            decimalMark: '.',
                            thousandsSeparator: ','
                        }
                    },
                    onCellData: null,
                    outputMode: 'file', // file|string|base64
                    tbodySelector: 'tr',
                    theadSelector: 'tr',
                    tableName: 'myTableName',
                    type: 'csv',
                    worksheetName: 'xlsWorksheetName'
                };
    ---------------------
    作者:Itxingfeichen
    来源:CSDN
    原文:https://blog.csdn.net/xingfeichen/article/details/53840673
    版权声明:本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    eclipse基础环境配置和svn、maven的配置以及maven的安装
    KindEditor 上传图片浏览器兼容性问题
    FastDFS 工具类实现文件上传_02
    FastDFS 实现图片上传_01
    jvm 堆、栈 、方法区概念和联系
    jvm 虚拟机的组成部分
    利用jQuery实现CheckBox全选/全不选/反选
    FastDFS架构
    Nginx 实现负载均衡
    Nginx 实现反向代理
  • 原文地址:https://www.cnblogs.com/hellofangfang/p/10942724.html
Copyright © 2011-2022 走看看