前端实现下载表格数据

1.html部分table id为“grid-log”，导出按钮id为“exportbtn”,表格数据为bootgrid插件渲染而成 

                <table id="grid-log" class="table table-condensed table-hover table-striped table-responsive" data-store-selection="true"><thead><tr><th data-column-id="pos" data-type="numeric" data-identifier="true"  data-visible="false">#</th><th data-column-id="timestamp" data-type="string">{{ lang._('Date') }}</th><th data-column-id="line" data-type="string">{{ lang._('Line') }}</th></tr></thead><tbody></tbody><tfoot><td></td><td><button id="exportbtn"data-toggle="tooltip" title="" type="button"class="btn btn-xs btn-default pull-right"data-original-title="{{ lang._('download selection')}}"><span class="fa fa-cloud-download"></span></button></td></tfoot></table>

 2.前端导出表格数据的重点在于下面几行代码：

// ie10
var blob = new Blob( [ output_data ], { type: "text/csv" } );
navigator.msSaveOrOpenBlob( blob, '{{scope}}.log' );

//  Firefox、google

$('<a></a>').attr('id','downloadFile').attr('href','data:text/csv;charset=utf8,' + encodeURIComponent(output_data)).attr('download','{{scope}}.log').appendTo('body');

$('#downloadFile').get(0).click();

      // download visible items$("#exportbtn").click(function(event){let records = [];$("#grid-log > tbody > tr").each(function(){let fields = [];$(this).find("td").each(function(){fields.push($(this).text().trim())});records.push(fields.join("\t"));});let output_data = records.join("\n");if($("#downloadFile").length > 0)$("#downloadFile").remove();$('<a></a>').attr('id','downloadFile').attr('href','data:text/csv;charset=utf8,' + encodeURIComponent(output_data)).attr('download','{{scope}}.log').appendTo('body');$('#downloadFile').ready(function() {if ( window.navigator.msSaveOrOpenBlob && window.Blob ) {var blob = new Blob( [ output_data ], { type: "text/csv" } );navigator.msSaveOrOpenBlob( blob, '{{scope}}.log' );} else {$('#downloadFile').get(0).click();}});});

3.防止用户点击分页按钮后，火狐、谷歌浏览器下载数据不能更新，需清除上次的下载标签，不然不会再次渲染，代码如下：

if($("#downloadFile").length > 0)$("#downloadFile").remove();