前端下载文件流

背景：
1、之前给的是路径下载路径，直接用a 或者window.location.href都可以，
但是后来给了一个文件映射流，浏览器就不能把流选染成我们想要的下载弹框了，于是就有了这样一种方法 download
2、还有一种情况就是后台返回给我其他文件 dat txt 这种都不能渲染成下载框，于是可以协商让后台返回给我文件流，然后使用download 方法

解决方案
download 插件

详细内容
就是实现这个下载需要一个插件 download插件 download.js

注：这个插件的内容在文章的最后

引入这个插件之后，我们可以调用download方法实现自定义文件名，将文件流转换为浏览器可渲染下载的文件等，

代码案例

HTML代码

<td>
	<span ng-click="fileDownload(x)">文件下载</span>
</td>

JS代码

$scope.fileDownload = function(x){
       $http({
           method: 'POST',
           url: 'terminalLog/downloadByFileName.do',
           data: {
               filename: x.errorLogUri
           }
       }).success(function(data,status,headers,config){
           download(data,x.Id+'_'+x.code+'_'+x.time+'.txt','text/plain');  //设置数据流和下载文件的名称以及文件类型
       }).error(function(data,status,headers,config){});
};

这里的话就是调用了download方法，然后渲染的是传入的数据data,然后文件名字是x.id,x.time等内容，然后，就可以实现下载了，当然我们如果能直接获得data的话就不用请求接口了，直接可以下载下来。

除了这三种(通过a 标签下载，通过href下载，通过download插件下载即本文），还有一种，就是通过提交前端表单，然后后台返回数据这样可以直接在浏览器渲染成页面。
这个代码是常用的日志下载的方法，通过提交表单可以下载日志的内容。

$scope.exportLogs = function() {
   $http({
      url: 'checkExport.do',
      method: 'POST',
      data: {
         searchLogJson: JSON.stringify($scope.logBean)
      }
   }).success(function(data,status,headers,config){
      if (data > 0) {
         $("#frm").attr('action', '/export.do').submit();
      } else {
         alert("没有查询到数据,不能导出");
      }
   }).error(function(data,status,headers,config){});
}

download.js插件代码可直接复制使用

//download.js v3.0, by dandavis; 2008-2014. [CCBY2] see http://danml.com/download.html for tests/usage
// v1 landed a FF+Chrome compat way of downloading strings to local un-named files, upgraded to use a hidden frame and optional mime
// v2 added named files via a[download], msSaveBlob, IE (10+) support, and window.URL support for larger+faster saves than dataURLs
// v3 added dataURL and Blob Input, bind-toggle arity, and legacy dataURL fallback was improved with force-download mime and base64 support

// data can be a string, Blob, File, or dataURL

       
                   
                   
function download(data, strFileName, strMimeType) {
   
   var self = window, // this script is only for browsers anyway...
      u = "application/octet-stream", // this default mime also triggers iframe downloads
      m = strMimeType || u, 
      x = data,
      D = document,
      a = D.createElement("a"),
      z = function(a){return String(a);},
      
      
      B = self.Blob || self.MozBlob || self.WebKitBlob || z,
      BB = self.MSBlobBuilder || self.WebKitBlobBuilder || self.BlobBuilder,
      fn = strFileName || "download",
      blob, 
      b,
      ua,
      fr;

   //if(typeof B.bind === 'function' ){ B=B.bind(self); }
   
   if(String(this)==="true"){ //reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callback
      x=[x, m];
      m=x[0];
      x=x[1]; 
   }
   
   
   
   //go ahead and download dataURLs right away
   if(String(x).match(/^data\:[\w+\-]+\/[\w+\-]+[,;]/)){
      return navigator.msSaveBlob ?  // IE10 can't do a[download], only Blobs:
         navigator.msSaveBlob(d2b(x), fn) : 
         saver(x) ; // everyone else can save dataURLs un-processed
   }//end if dataURL passed?
   
   try{
   
      blob = x instanceof B ? 
         x : 
         new B([x], {type: m}) ;
   }catch(y){
      if(BB){
         b = new BB();
         b.append([x]);
         blob = b.getBlob(m); // the blob
      }
      
   }

   function d2b(u) {
      var p= u.split(/[:;,]/),
      t= p[1],
      dec= p[2] == "base64" ? atob : decodeURIComponent,
      bin= dec(p.pop()),
      mx= bin.length,
      i= 0,
      uia= new Uint8Array(mx);

      for(i;i<mx;++i) uia[i]= bin.charCodeAt(i);

      return new B([uia], {type: t});
    }
     
   function saver(url, winMode){
      
      
      if ('download' in a) { //html5 A[download]           
         a.href = url;
         a.setAttribute("download", fn);
         a.innerHTML = "downloading...";
         D.body.appendChild(a);
         setTimeout(function() {
            a.click();
            D.body.removeChild(a);
            if(winMode===true){setTimeout(function(){ self.URL.revokeObjectURL(a.href);}, 250 );}
         }, 66);
         return true;
      }
      
      //do iframe dataURL download (old ch+FF):
      var f = D.createElement("iframe");
      D.body.appendChild(f);
      if(!winMode){ // force a mime that will download:
         url="data:"+url.replace(/^data:([\w\/\-\+]+)/, u);
      }
       
   
      f.src = url;
      setTimeout(function(){ D.body.removeChild(f); }, 333);
      
   }//end saver 
      

   if (navigator.msSaveBlob) { // IE10+ : (has Blob, but not a[download] or URL)
      return navigator.msSaveBlob(blob, fn);
   }  
   
   if(self.URL){ // simple fast and modern way using Blob and URL:
      saver(self.URL.createObjectURL(blob), true);
   }else{
      // handle non-Blob()+non-URL browsers:
      if(typeof blob === "string" || blob.constructor===z ){
         try{
            return saver( "data:" +  m   + ";base64,"  +  self.btoa(blob)  ); 
         }catch(y){
            return saver( "data:" +  m   + "," + encodeURIComponent(blob)  ); 
         }
      }
      
      // Blob but not URL:
      fr=new FileReader();
      fr.onload=function(e){
         saver(this.result); 
      };
      fr.readAsDataURL(blob);
   }  
   return true;
} /* end download() */

猜你喜欢