js导出table数据

导出数据，在后台功能中是一个比较重要的功能，一般情况由后端程序导出数据并生成文件供前端下载，后台生成有个好处是，不受分页影响。
不过有时我们也需要纯前端来导出数据，今天我们就聊一下前端导出。

插件：tableExport.js

用法

1. html代码

<button onclick="export_data('example')">export</button>
<table id="example">
  <thead>
    <tr>
      <th>id</th>
      <th>name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>lilei</td>
    </tr>
    <tr>
      <td>2</td>
      <td>hanmeimei</td>
    </tr>
  </tbody>
</table>
<!--这个a标签作为导出文件的锚点-->
<a id="export_data"></a>

2. javascript代码

<script type="text/javascript" src="/js/tableExport.js"></script>
<script type="text/javascript" src="/js/jquery.base64.js"></script>
<script type="text/javascript">
  function export_table(table_id){
    var time = new Date();
    time = time.toLocaleDateString().replace(/\//g, '');
    $("#"+table_id).tableExport({type:'excel',escape:'false',fileName:table_id+"_"+time});
    
  }
</script>

对源码的修改

从上面的代码中可以看到，我们可以通过传入fileName参数来定义导出文件的名称，但是在源码中，其实是不支持的，我们可以通过修改源码，达到我们的需求。
有两个需要修改的部分：

1. 修改插件的defaults参数，增加fileName

var defaults = {
            separator: ',',
            ignoreColumn: [],
            tableName:'yourTableName',
            type:'csv',
            pdfFontSize:14,
            pdfLeftMargin:20,
            escape:'true',
            htmlContent:'false',
            fileName: 'exportData',
            consoleLog:'false'
            };

2. 修改下载方式

window.open('data:application/vnd.ms-'+defaults.type+';filename=exportData.doc;' + base64data);

源码中用window.open的方式导出文件，这种方式不支持自定义文件名，我们可以通过在页面中增加一个a标签的方式来实现。

document.getElementById("export_data").href ='data:application/vnd.ms-excel;' + base64data;
document.getElementById("export_data").download = defaults.fileName;
document.getElementById("export_data").click();

好的，现在就可以导出数据了。