利用tableExport.js导出前端table表格到本地（文末有未压缩源码）

需求很简单，点一个按钮把表格导出/下载到电脑里，用tableExport.js就可以了，代码及其效果如下：

引入文件：

<script type="text/javascript" src="js/src/tableExport.js"></script>

js代码：

 $("#export_table").click(function(){
        $('#model_save_tab').tableExport({
            type: 'excel',
            fileName: "回风系统消声计算"
        })
    })

这个type类型我记得好像改成doc都可以完美导出，看自己需要吧，页面表格是这样的

点了导出表格下载到电脑上是这样的

总之还行，用很多次了，今天突然想起博客里没有记这个，赶紧补上。

tableExport.js源码，这个我没有压缩，太长了不建议下拉，需要的话直接复制吧

/**
 * @preserve tableExport.jquery.plugin
 *
 * Version 1.9.7
 *
 * Copyright (c) 2015-2017 hhurz, https://github.com/hhurz
 *
 * Original Work Copyright (c) 2014 Giri Raj
 *
 * Licensed under the MIT License
 **/

(function ($) {
  $.fn.extend({
    tableExport: function (options) {
      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
        excelRTL:          false,         // true = Set Excel option 'DisplayRightToLeft'
        excelstyles:       [],            // e.g. ['border-bottom', 'border-top', 'border-left', 'border-right']
        fileName:          'tableExport',
        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,
        onIgnoreRow:       null,          // onIgnoreRow($tr, rowIndex): function should return true to not export a row
        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'
      };

      var FONT_ROW_RATIO = 1.15;
      var el             = this;
      var DownloadEvt    = null;
      var $hrows         = [];
      var $rows          = [];
      var rowIndex       = 0;
      var rowspans       = [];
      var trData         = '';
      var colNames       = [];
      var blob;
      var $hiddenTableElements = [];
      var checkCellVisibilty = false;     // used to speed up export of tables with extensive css styling

      $.extend(true, defaults, options);

      colNames = GetColumnNames(el);

      if ( defaults.type == 'csv' || defaults.type == 'tsv' || defaults.type == 'txt' ) {

        var csvData   = "";
        var rowlength = 0;
        rowIndex      = 0;

        function csvString (cell, rowIndex, colIndex) {
          var result = '';

          if ( cell !== null ) {
            var dataString = parseString(cell, rowIndex, colIndex);

            var csvValue = (dataString === null || dataString === '') ? '' : dataString.toString();

            if ( defaults.type == 'tsv' ) {
              if ( dataString instanceof Date )
                dataString.toLocaleString();

              // According to http://www.iana.org/assignments/media-types/text/tab-separated-values
              // are fields that contain tabs not allowable in tsv encoding
              result = replaceAll(csvValue, '\t', ' ');
            }
            else {
              // Takes a string and encapsulates it (by default in double-quotes) if it
              // contains the csv field separator, spaces, or linebreaks.
              if ( dataString instanceof Date )
                result = defaults.csvEnclosure + dataString.toLocaleString() + defaults.csvEnclosure;
              else {
                result = replaceAll(csvValue, defaults.csvEnclosure, defaults.csvEnclosure + defaults.csvEnclosure);

                if ( result.indexOf(defaults.csvSeparator) >= 0 || /[\r\n ]/g.test(result) )
                  result = defaults.csvEnclosure + result + defaults.csvEnclosure;
              }
            }
          }

          return result;
        }

        var CollectCsvData = function ($rows, rowselector, length) {

          $rows.each(function () {
            trData = "";
            ForEachVisibleCell(this, rowselector, rowIndex, length + $rows.length,
              function (cell, row, col) {
                trData += csvString(cell, row, col) + (defaults.type == 'tsv' ? '\t' : defaults.csvSeparator);
              });
            trData = $.trim(trData).substring(0, trData.length - 1);
            if ( trData.length > 0 ) {

              if ( csvData.length > 0 )
                csvData += "\n";

              csvData += trData;
            }
            rowIndex++;
          });

          return $rows.length;
        };

        rowlength += CollectCsvData($(el).find('thead').first().find(defaults.theadSelector), 'th,td', rowlength);
        $(el).find('tbody').each(function () {
          rowlength += CollectCsvData($(this).find(defaults.tbodySelector), 'td,th', rowlength);
        });
        if ( defaults.tfootSelector.length )
          CollectCsvData($(el).find('tfoot').first().find(defaults.tfootSelector), 'td,th', rowlength);

        csvData += "\n";

        //output
        if ( defaults.consoleLog === true )
          console.log(csvData);

        if ( defaults.outputMode === 'string' )
          return csvData;

        if ( defaults.outputMode === 'base64' )
          return base64encode(csvData);

        if ( defaults.outputMode === 'window' ) {
          downloadFile(false, 'data:text/' + (defaults.type == 'csv' ? 'csv' : 'plain') + ';charset=utf-8,', csvData);
          return;
        }

        try {
          blob = new Blob([csvData], {type: "text/" + (defaults.type == 'csv' ? 'csv' : 'plain') + ";charset=utf-8"});
          saveAs(blob, defaults.fileName + '.' + defaults.type, (defaults.type != 'csv' || defaults.csvUseBOM === false));
        }
        catch (e) {
          downloadFile(defaults.fileName + '.' + defaults.type,
            'data:text/' + (defaults.type == 'csv' ? 'csv' : 'plain') + ';charset=utf-8,' + ((defaults.type == 'csv' && defaults.csvUseBOM) ? '\ufeff' : ''),
            csvData);
        }

      } else if ( defaults.type == 'sql' ) {

        // Header
        rowIndex   = 0;
        var tdData = "INSERT INTO `" + defaults.tableName + "` (";
        $hrows     = $(el).find('thead').first().find(defaults.theadSelector);
        $hrows.each(function () {
          ForEachVisibleCell(this, 'th,td', rowIndex, $hrows.length,
            function (cell, row, col) {
              tdData += "'" + parseString(cell, row, col) + "',";
            });
          rowIndex++;
          tdData = $.trim(tdData);
          tdData = $.trim(tdData).substring(0, tdData.length - 1);
        });
        tdData += ") VALUES ";
        // Row vs Column
        $(el).find('tbody').each(function () {
          $rows.push.apply($rows, $(this).find(defaults.tbodySelector));
        });
        if ( defaults.tfootSelector.length )
          $rows.push.apply($rows, $(el).find('tfoot').find(defaults.tfootSelector));
        $($rows).each(function () {
          trData = "";
          ForEachVisibleCell(this, 'td,th', rowIndex, $hrows.length + $rows.length,
            function (cell, row, col) {
              trData += "'" + parseString(cell, row, col) + "',";
            });
          if ( trData.length > 3 ) {
            tdData += "(" + trData;
            tdData = $.trim(tdData).substring(0, tdData.length - 1);
            tdData += "),";
          }
          rowIndex++;
        });

        tdData = $.trim(tdData).substring(0, tdData.length - 1);
        tdData += ";";

        //output
        if ( defaults.consoleLog === true )
          console.log(tdData);

        if ( defaults.outputMode === 'string' )
          return tdData;

        if ( defaults.outputMode === 'base64' )
          return base64encode(tdData);

        try {
          blob = new Blob([tdData], {type: "text/plain;charset=utf-8"});
          saveAs(blob, defaults.fileName + '.sql');
        }
        catch (e) {
          downloadFile(defaults.fileName + '.sql',
            'data:application/sql;charset=utf-8,',
            tdData);
        }

      } else if ( defaults.type == 'json' ) {
        var jsonHeaderArray = [];
        $hrows              = $(el).find('thead').first().find(defaults.theadSelector);
        $hrows.each(function () {
          var jsonArrayTd = [];

          ForEachVisibleCell(this, 'th,td', rowIndex, $hrows.length,
            function (cell, row, col) {
              jsonArrayTd.push(parseString(cell, row, col));
            });
          jsonHeaderArray.push(jsonArrayTd);
        });

        var jsonArray = [];
        $(el).find('tbody').each(function () {
          $rows.push.apply($rows, $(this).find(defaults.tbodySelector));
        });
        if ( defaults.tfootSelector.length )
          $rows.push.apply($rows, $(el).find('tfoot').find(defaults.tfootSelector));
        $($rows).each(function () {
          var jsonObjectTd = {};
          var colIndex = 0;

          ForEachVisibleCell(this, 'td,th', rowIndex, $hrows.length + $rows.length,
            function (cell, row, col) {
              if ( jsonHeaderArray.length ) {
                jsonObjectTd[jsonHeaderArray[jsonHeaderArray.length - 1][colIndex]] = parseString(cell, row, col);
              } else {
                jsonObjectTd[colIndex] = parseString(cell, row, col);
              }
              colIndex++;
            });
          if ( $.isEmptyObject(jsonObjectTd) === false )
            jsonArray.push(jsonObjectTd);

          rowIndex++;
        });

        var sdata = "";

        if ( defaults.jsonScope == 'head' )
          sdata = JSON.stringify(jsonHeaderArray);
        else if ( defaults.jsonScope == 'data' )
          sdata = JSON.stringify(jsonArray);
        else // all
          sdata = JSON.stringify({header: jsonHeaderArray, data: jsonArray});

        if ( defaults.consoleLog === true )
          console.log(sdata);

        if ( defaults.outputMode === 'string' )
          return sdata;

        if ( defaults.outputMode === 'base64' )
          return base64encode(sdata);

        try {
          blob = new Blob([sdata], {type: "application/json;charset=utf-8"});
          saveAs(blob, defaults.fileName + '.json');
        }
        catch (e) {
          downloadFile(defaults.fileName + '.json',
            'data:application/json;charset=utf-8;base64,',
            sdata);
        }

      } else if ( defaults.type === 'xml' ) {

        rowIndex = 0;
        var xml  = '<?xml version="1.0" encoding="utf-8"?>';
        xml += '<tabledata><fields>';

        // Header
        $hrows = $(el).find('thead').first().find(defaults.theadSelector);
        $hrows.each(function () {

          ForEachVisibleCell(this, 'th,td', rowIndex, $hrows.length,
            function (cell, row, col) {
              xml += "<field>" + parseString(cell, row, col) + "</field>";
            });
          rowIndex++;
        });
        xml += '</fields><data>';

        // Row Vs Column
        var rowCount = 1;
        $(el).find('tbody').each(function () {
          $rows.push.apply($rows, $(this).find(defaults.tbodySelector));
        });
        if ( defaults.tfootSelector.length )
          $rows.push.apply($rows, $(el).find('tfoot').find(defaults.tfootSelector));
        $($rows).each(function () {
          var colCount = 1;
          trData       = "";
          ForEachVisibleCell(this, 'td,th', rowIndex, $hrows.length + $rows.length,
            function (cell, row, col) {
              trData += "<column-" + colCount + ">" + parseString(cell, row, col) + "</column-" + colCount + ">";
              colCount++;
            });
          if ( trData.length > 0 && trData != "<column-1></column-1>" ) {
            xml += '<row id="' + rowCount + '">' + trData + '</row>';
            rowCount++;
          }

          rowIndex++;
        });
        xml += '</data></tabledata>';

        //output
        if ( defaults.consoleLog === true )
          console.log(xml);

        if ( defaults.outputMode === 'string' )
          return xml;

        if ( defaults.outputMode === 'base64' )
          return base64encode(xml);

        try {
          blob = new Blob([xml], {type: "application/xml;charset=utf-8"});
          saveAs(blob, defaults.fileName + '.xml');
        }
        catch (e) {
          downloadFile(defaults.fileName + '.xml',
            'data:application/xml;charset=utf-8;base64,',
            xml);
        }
      }
      else if ( defaults.type === 'excel' && defaults.excelFileFormat === 'xmlss' ) {
        var docDatas = [];

        $(el).filter(function () {
          return isVisible($(this));
        }).each(function () {
          var $table  = $(this);
          var docData = '';

          $hiddenTableElements = $table.find("tr, th, td").filter(":hidden");
          checkCellVisibilty = $hiddenTableElements.length > 0;

          rowIndex    = 0;
          colNames    = GetColumnNames(this);
          $hrows      = $table.find('thead').first().find(defaults.theadSelector);
          docData    += '<Table>';

          // Header
          var cols = 0;
          $hrows.each(function () {