tableExport.js 导出表格

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'
      };
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap-table-export.js是一个用于导出数据的插件。它是基于Bootstrap和jQuery开发的一个功能强大的表格导出插件。通过使用该插件,我们可以轻松地将表格数据导出为Excel、CSV、JSON和PDF等多种格式。 bootstrap-table-export.js具有以下特点: 1.灵活的配置选项:插件提供了丰富的配置选项,可以根据实际需求进行自定义设置,如导出按钮的位置、导出文件的名称等。 2.多种导出格式支持:除了常见的Excel和CSV格式,插件还支持导出JSON和PDF格式,使数据的导出更加灵活多样。 3.导出功能强大:插件支持导出整个表格数据或者选择性导出部分数据,可以根据需要勾选需要导出的数据行,同时还可以对导出的数据进行排序和过滤。 4.提供了丰富的导出选项:插件提供了一些实用的导出选项,如导出当前页数据、导出所有数据、导出选中的数据行等,方便用户根据实际需求进行操作。 5.与Bootstrap和jQuery兼容性好:插件基于流行的Bootstrap和jQuery框架开发,因此与这两个框架的兼容性非常好,可以和其他Bootstrap和jQuery插件无缝集成使用。 总之,bootstrap-table-export.js是一个非常实用的表格导出插件,它可以方便地将表格数据导出为多种格式,使得数据的共享和处理变得更加方便和高效。无论是个人用户还是企业用户,都可以通过使用这个插件来满足导出数据的需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值