当前位置： 移动技术网 > IT编程>开发语言>JavaScript > tableExport.js导出表格的操作步骤教程

tableExport.js导出表格的操作步骤教程

2018年10月03日  | 移动技术网IT编程  | 我要评论

1. 需要引入的js

<script src="../plugins/table-export/bootstrap-table-export.min.js"></script>
<script src="../plugins/table-export/tableexport.js"></script>

2. 我这里使用的是bootstrap-table

<link rel="stylesheet" href="../plugins/bootstrap-table/css/bootstrap-table.css">

<script src="../plugins/bootstrap-table/js/bootstrap-table.js"></script>
<script src="../plugins/bootstrap-table/js/bootstrap-table-zh-cn.js"></script>

3. 使用tableexport.js 进行导出，只需要定义一个按钮

 <button class="addbtn" id="exporttable" style="margin-top:2px;margin-bottom: 10px"><i
                                class="fa fa-download" style="color:#409eff"></i> 导出数据
                        </button>

4. js中需要 在按钮的点击事件中绑定

$("#exporttable").click(function () {
    //导出
    $(".project_tableall").tableexport({
        type: "excel",
        escape: "false",
        filename: '答题情况表'
    });
});

原本的tableexport.js 是不支持自定义导出的表格名的，所以，可以直接修改，如果需要自定义表格名的话，就传一个filename就可以。

  tableexport: function (options,filename) {
      var defaults = {
        consolelog:        false,
        csvenclosure:      '"',
        csvseparator:      ',',
        csvusebom:         true,
        displaytablename:  false,
        escape:            false,
        excelfileformat:   'xlshtml',     // xmlss = xml spreadsheet 2003 file format (xmlss), xlshtml = excel 2000 html format
        excelstyles:       [],            // e.g. ['border-bottom', 'border-top', 'border-left', 'border-right']
          filename:          filename == undefined?'tableexport':filename,
        htmlcontent:       false,
        ignorecolumn:      [],
        ignorerow:         [],
        jsonscope:         'all',         // head, data, all
        jspdf: {
          orientation:  'p',
          unit:         'pt',
          format:       'a4',             // jspdf page format or 'bestfit' for autmatic paper format selection
          margins:      {left: 20, right: 10, top: 10, bottom: 10},
          ondoccreated: null,
          autotable: {
            styles: {
              cellpadding: 2,
              rowheight:   12,
              fontsize:    8,
              fillcolor:   255,           // color value or 'inherit' to use css background-color from html table
              textcolor:   50,            // color value or 'inherit' to use css color from html table
              fontstyle:   'normal',      // normal, bold, italic, bolditalic or 'inherit' to use css font-weight and fonst-style from html table
              overflow:    'ellipsize',   // visible, hidden, ellipsize or linebreak
              halign:      'left',        // left, center, right
              valign:      'middle'       // top, middle, bottom
            },
            headerstyles: {
              fillcolor: [52, 73, 94],
              textcolor: 255,
              fontstyle: 'bold',
              halign:    'center'
            },
            alternaterowstyles: {
              fillcolor: 245
            },
            tableexport: {
              doc:               null,    // jspdf doc object. if set, an already created doc will be used to export to
              onafterautotable:  null,
              onbeforeautotable: null,
              onautotabletext:   null,
              ontable:           null,
              outputimages:      true
            }
          }
        },
        numbers: {
          html: {
            decimalmark:        '.',
            thousandsseparator: ','
          },
          output:                         // set to false to not format numbers in exported output
                {
                  decimalmark:        '.',
                  thousandsseparator: ','
                }
        },
        oncelldata:        null,
        oncellhtmldata:    null,
        onmsonumberformat: null,          // excel 2000 html format only. see readme.md for more information about msonumberformat
        outputmode:        'file',        // 'file', 'string', 'base64' or 'window' (experimental)
        pdfmake: {
          enabled: false,                 // true: use pdfmake instead of jspdf and jspdf-autotable (experimental)
          docdefinition: {
            pageorientation: 'portrait',  // 'portrait' or 'landscape'
            defaultstyle: {
              font: 'roboto'              // default is 'roboto', for arabic font set this option to 'mirza' and include mirza_fonts.js
            }
          },
          fonts: {}
        },
        tbodyselector:     'tr',
        tfootselector:     'tr',          // set empty ('') to prevent export of tfoot rows
        theadselector:     'tr',
        tablename:         'mytablename',
        type:              'csv',         // 'csv', 'tsv', 'txt', 'sql', 'json', 'xml', 'excel', 'doc', 'png' or 'pdf'
        worksheetname:     'worksheet'
      };

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网