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'
      };