js+下载文件夹

js+下载文件夹

一、此方法火狐有些版本是不支持的

 

window.location.href = 'https://*****.oss-cn-**.aliyuncs.com/*********';

二、为了解决火狐有些版本不支持,可以改成这种方式

window.location='https://*****.oss-cn-**.aliyuncs.com/*********';

三、该方法IE和火狐都可以,url表示要下载的文件路径:

1. <div hljs-ln-n"="" data-line-number="1">
   function(url){
2. <div hljs-ln-n"="" data-line-number="2">
       try {
3. <div hljs-ln-n"="" data-line-number="3">
             var elemIF = document.createElement("iframe");
4. <div hljs-ln-n"="" data-line-number="4">
             elemIF.src = url;
5. <div hljs-ln-n"="" data-line-number="5">
             elemIF.style.display = "none";
6. <div hljs-ln-n"="" data-line-number="6">
             document.body.appendChild(elemIF);
7. <div hljs-ln-n"="" data-line-number="7">
           } catch (e) {
8. <div hljs-ln-n"="" data-line-number="8">
             alert("下载异常！");
9. <div hljs-ln-n"="" data-line-number="9">
           }
10. <div hljs-ln-n"="" data-line-number="10">
    }

四、form表单的形式

 

1. downloadFile(url){
2.  
         var form=$("<form>");
3.  
         form.attr("style","display:none");
4.  
         form.attr("target","");
5.  
         form.attr("method","get"); 
6.  
        form.attr("action",url);
7.  
         $("body").append(form);
8.  
         form.submit();//表单提交}
9.  
   }

 

五、a标签的方式

1.  
   function(url,name){
2.  
       var a = document.createElement("a");
3.  
        a.download = name + ".xls";
4.  
        a.href = url;
5.  
        $("body").append(a); // 修复firefox中无法触发click
6.  
        a.click();
7.  
        $(a).remove();
8.  
   }

六、假如后台给的文件流

 

1. function (formData, url, name) {
2.  
     return new Promise((resolve, reject) => {
3.  
       var xhr = new XMLHttpRequest();
4.  
       xhr.open("POST", url, true); // 也可以使用POST方式，根据接口
5.  
       xhr.responseType = "blob"; // 返回类型blob
6.  
       // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
7.  
       xhr.onload = function () {
8.  
         // 请求完成
9.  
         if (this.status === 200) {
10.  
            // 返回200
11.  
            var blob = this.response;
12.  
            var reader = new FileReader();
13.  
            reader.readAsDataURL(blob); // 转换为base64，可以直接放入a表情href
14.  
            reader.onload = function (e) {
15.  
              // 转换完成，创建一个a标签用于下载
16.  
              var a = document.createElement("a");
17.  
              a.download = name + ".xls";
18.  
              a.href = e.target.result;
19.  
              $("body").append(a); // 修复firefox中无法触发click
20.  
              a.click();
21.  
              resolve(200)
22.  
              $(a).remove();
23.  
            };
24.  
          }
25.  
        };
26.  
        // 发送ajax请求
27.  
        xhr.send(formData);
28.  
      })
29.  
    };

 

七、download.js
我粘贴一下download的源码

 

 

 

1. //download.js v4.2, by dandavis; 2008-2016. [CCBY2] see http://danml.com/download.html for tests/usage
2.  
   // v1 landed a FF+Chrome compat way of downloading strings to local un-named files, upgraded to use a hidden frame and optional mime
3.  
   // v2 added named files via a[download], msSaveBlob, IE (10+) support, and window.URL support for larger+faster saves than dataURLs
4.  
   // v3 added dataURL and Blob Input, bind-toggle arity, and legacy dataURL fallback was improved with force-download mime and base64 support. 3.1 improved safari handling.
5.  
   // v4 adds AMD/UMD, commonJS, and plain browser support
6.  
   // v4.1 adds url download capability via solo URL argument (same domain/CORS only)
7.  
   // v4.2 adds semantic variable names, long (over 2MB) dataURL support, and hidden by default temp anchors
8.  
   // https://github.com/rndme/download
9.  
    
10.  
    (function (root, factory) {
11.  
        if (typeof define === 'function' && define.amd) {
12.  
            // AMD. Register as an anonymous module.
13.  
            define([], factory);
14.  
        } else if (typeof exports === 'object') {
15.  
            // Node. Does not work with strict CommonJS, but
16.  
            // only CommonJS-like environments that support module.exports,
17.  
            // like Node.
18.  
            module.exports = factory();
19.  
        } else {
20.  
            // Browser globals (root is window)
21.  
            root.download = factory();
22.  
      }
23.  
    }(this, function () {
24.  
     
25.  
        return function download(data, strFileName, strMimeType) {
26.  
     
27.  
            var self = window, // this script is only for browsers anyway...
28.  
                defaultMime = "application/octet-stream", // this default mime also triggers iframe downloads
29.  
                mimeType = strMimeType || defaultMime,
30.  
                payload = data,
31.  
                url = !strFileName && !strMimeType && payload,
32.  
                anchor = document.createElement("a"),
33.  
                toString = function(a){return String(a);},
34.  
                myBlob = (self.Blob || self.MozBlob || self.WebKitBlob || toString),
35.  
                fileName = strFileName || "download",
36.  
                blob,
37.  
                reader;
38.  
                myBlob= myBlob.call ? myBlob.bind(self) : Blob ;
39.  
          
40.  
            if(String(this)==="true"){ //reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callback
41.  
                payload=[payload, mimeType];
42.  
                mimeType=payload[0];
43.  
                payload=payload[1];
44.  
            }
45.  
     
46.  
     
47.  
            if(url && url.length< 2048){ // if no filename and no mime, assume a url was passed as the only argument
48.  
                fileName = url.split("/").pop().split("?")[0];
49.  
                anchor.href = url; // assign href prop to temp anchor
50.  
                  if(anchor.href.indexOf(url) !== -1){ // if the browser determines that it's a potentially valid url path:
51.  
                    var ajax=new XMLHttpRequest();
52.  
                    ajax.open( "GET", url, true);
53.  
                    ajax.responseType = 'blob';
54.  
                    ajax.onload= function(e){ 
55.  
                      download(e.target.response, fileName, defaultMime);
56.  
                    };
57.  
                    setTimeout(function(){ ajax.send();}, 0); // allows setting custom ajax headers using the return:
58.  
                    return ajax;
59.  
                } // end if valid url?
60.  
            } // end if url?
61.  
     
62.  
     
63.  
            //go ahead and download dataURLs right away
64.  
            if(/^data\:[\w+\-]+\/[\w+\-]+[,;]/.test(payload)){
65.  
            
66.  
                if(payload.length > (1024*1024*1.999) && myBlob !== toString ){
67.  
                    payload=dataUrlToBlob(payload);
68.  
                    mimeType=payload.type || defaultMime;
69.  
                }else{            
70.  
                    return navigator.msSaveBlob ?  // IE10 can't do a[download], only Blobs:
71.  
                        navigator.msSaveBlob(dataUrlToBlob(payload), fileName) :
72.  
                        saver(payload) ; // everyone else can save dataURLs un-processed
73.  
                }
74.  
                
75.  
            }//end if dataURL passed?
76.  
     
77.  
            blob = payload instanceof myBlob ?
78.  
                payload :
79.  
                new myBlob([payload], {type: mimeType}) ;
80.  
     
81.  
     
82.  
            function dataUrlToBlob(strUrl) {
83.  
                var parts= strUrl.split(/[:;,]/),
84.  
                type= parts[1],
85.  
                decoder= parts[2] == "base64" ? atob : decodeURIComponent,
86.  
                binData= decoder( parts.pop() ),
87.  
                mx= binData.length,
88.  
                i= 0,
89.  
                uiArr= new Uint8Array(mx);
90.  
     
91.  
                for(i;i<mx;++i) uiArr[i]= binData.charCodeAt(i);
92.  
     
93.  
                return new myBlob([uiArr], {type: type});
94.  
             }
95.  
     
96.  
            function saver(url, winMode){
97.  
     
98.  
                if ('download' in anchor) { //html5 A[download]
99.  
                    anchor.href = url;
100.  
                     anchor.setAttribute("download", fileName);
101.  
                     anchor.className = "download-js-link";
102.  
                     anchor.innerHTML = "downloading...";
103.  
                     anchor.style.display = "none";
104.  
                     document.body.appendChild(anchor);
105.  
                     setTimeout(function() {
106.  
                         anchor.click();
107.  
                         document.body.removeChild(anchor);
108.  
                         if(winMode===true){setTimeout(function(){ self.URL.revokeObjectURL(anchor.href);}, 250 );}
109.  
                     }, 66);
110.  
                     return true;
111.  
                 }
112.  
      
113.  
                 // handle non-a[download] safari as best we can:
114.  
                 if(/(Version)\/(\d+)\.(\d+)(?:\.(\d+))?.*Safari\//.test(navigator.userAgent)) {
115.  
                     url=url.replace(/^data:([\w\/\-\+]+)/, defaultMime);
116.  
                     if(!window.open(url)){ // popup blocked, offer direct download:
117.  
                         if(confirm("Displaying New Document\n\nUse Save As... to download, then click back to return to this page.")){ location.href=url; }
118.  
                     }
119.  
                     return true;
120.  
                 }
121.  
      
122.  
                 //do iframe dataURL download (old ch+FF):
123.  
                 var f = document.createElement("iframe");
124.  
                 document.body.appendChild(f);
125.  
      
126.  
                 if(!winMode){ // force a mime that will download:
127.  
                     url="data:"+url.replace(/^data:([\w\/\-\+]+)/, defaultMime);
128.  
                 }
129.  
                 f.src=url;
130.  
                 setTimeout(function(){ document.body.removeChild(f); }, 333);
131.  
      
132.  
             }//end saver
133.  
      
134.  
      
135.  
      
136.  
      
137.  
             if (navigator.msSaveBlob) { // IE10+ : (has Blob, but not a[download] or URL)
138.  
                 return navigator.msSaveBlob(blob, fileName);
139.  
             }
140.  
      
141.  
             if(self.URL){ // simple fast and modern way using Blob and URL:
142.  
                 saver(self.URL.createObjectURL(blob), true);
143.  
             }else{
144.  
                 // handle non-Blob()+non-URL browsers:
145.  
                 if(typeof blob === "string" || blob.constructor===toString ){
146.  
                     try{
147.  
                         return saver( "data:" +  mimeType   + ";base64,"  +  self.btoa(blob)  );
148.  
                     }catch(y){
149.  
                         return saver( "data:" +  mimeType   + "," + encodeURIComponent(blob)  );
150.  
                     }
151.  
                 }
152.  
      
153.  
                 // Blob but not URL support:
154.  
                 reader=new FileReader();
155.  
                 reader.onload=function(e){
156.  
                     saver(this.result);
157.  
                 };
158.  
                 reader.readAsDataURL(blob);
159.  
             }
160.  
             return true;
161.  
         }; /* end download() */
162.  
     }));

 

用法：

download(fileUrl,name,"video/mp4");

具体更多的用法请参考官网，

注意 download.js第一个参数 是数据流，不是像oss那样的文件地址

详细的配置信息可以参考我写的这篇文章：http://blog.ncmem.com/wordpress/2019/08/28/java%e6%89%b9%e9%87%8f%e4%b8%8b%e8%bd%bd/ 

•  
      xhr.open("POST", url, true); // 也可以使用POST方式，根据接口
•  
      xhr.onload = function () {
•  
          // 返回200
•  
          reader.readAsDataURL(blob); // 转换为base64，可以直接放入a表情href
•  
            var a = document.createElement("a");
•  
            $("body").append(a); // 修复firefox中无法触发click
•  
            $(a).remove();
•  
      };
•  
    })
• 七、download.js
  我粘贴一下download的源码

   

   

   

  //download.js v4.2, by dandavis; 2008-2016. [CCBY2] see http://danml.com/download.html for tests/usage

•  
  // v3 added dataURL and Blob Input, bind-toggle arity, and legacy dataURL fallback was improved with force-download mime and base64 support. 3.1 improved safari handling.
•  
  // v4.2 adds semantic variable names, long (over 2MB) dataURL support, and hidden by default temp anchors
•  
  (function (root, factory) {
•  
          define([], factory);
•  
          // only CommonJS-like environments that support module.exports,
•  
      } else {
•  
    }
•  
      return function download(data, strFileName, strMimeType) {
•  
              defaultMime = "application/octet-stream", // this default mime also triggers iframe downloads
•  
              url = !strFileName && !strMimeType && payload,
•  
              myBlob = (self.Blob || self.MozBlob || self.WebKitBlob || toString),
•  
              reader;
•  
          if(String(this)==="true"){ //reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callback
•  
              payload=payload[1];
•  
   
•  
              anchor.href = url; // assign href prop to temp anchor
•  
•  
                  ajax.responseType = 'blob';
•  
                  };
•  
              } // end if valid url?
•  
   
•  
          
•  
                  mimeType=payload.type || defaultMime;
•  
                      navigator.msSaveBlob(dataUrlToBlob(payload), fileName) :
•  
              
•  
          blob = payload instanceof myBlob ?
•  
   
•  
              var parts= strUrl.split(/[:;,]/),
•  
              binData= decoder( parts.pop() ),
•  
              uiArr= new Uint8Array(mx);
•  
   
•  
   
•  
              if ('download'in anchor) { //html5 A[download]
•  
                  anchor.className = "download-js-link";
•  
                  document.body.appendChild(anchor);
•  
                      document.body.removeChild(anchor);
•  
                  return true;
•  
              // handle non-a[download] safari as best we can:
•  
                  if(!window.open(url)){ // popup blocked, offer direct download:
•  
                  return true;
•  
              //do iframe dataURL download (old ch+FF):
•  
   
•  
              }
•  
   
•  
   
•  
          if (navigator.msSaveBlob) { // IE10+ : (has Blob, but not a[download] or URL)
•  
   
•  
          }else{
•  
                  try{
•  
                      return saver( "data:" +  mimeType   + "," + encodeURIComponent(blob)  );
•  
   
•  
              reader.onload=function(e){
•  
              reader.readAsDataURL(blob);
•  
      }; /* end download() */
• 用法：

  注意 download.js第一个参数 是数据流，不是像oss那样的文件地址

  详细的配置信息可以参考我写的这篇文章：http://blog.ncmem.com/wordpress/2019/08/28/java%e6%89%b9%e9%87%8f%e4%b8%8b%e8%bd%bd/ ​​​​​​​
  

   

   
   

  posted on 2019-08-06 09:24  Xproer-松鼠  阅读(1481)  评论(0)  编辑  收藏  举报