前端实现下载表格数据

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

                

                    

                    

                        
#
                        
{{ lang._('Date') }}
                        
{{ lang._('Line') }}
                    
                    
                    

                    
                    

                      

                      

                        
                            
                        
                      
                    
                

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

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

//  Firefox、google

$('').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();
          $('').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();