• web批量下载图片


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

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

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

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

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

    function(url){

        try {

              var elemIF = document.createElement("iframe");

              elemIF.src = url;

              elemIF.style.display = "none";

              document.body.appendChild(elemIF);

            } catch (e) {

              alert("下载异常!");

            }

    }

    四、form表单的形式

    downloadFile(url){

          var form=$("<form>");

          form.attr("style","display:none");

          form.attr("target","");

          form.attr("method","get");

         form.attr("action",url);

          $("body").append(form);

          form.submit();//表单提交}

    }

    五、a标签的方式

    function(url,name){

        var a = document.createElement("a");

         a.download = name + ".xls";

         a.href = url;

         $("body").append(a); // 修复firefox中无法触发click

         a.click();

         $(a).remove();

    }

    六、假如后台给的文件流

    function (formData, url, name) {

      return new Promise((resolve, reject) => {

        var xhr = new XMLHttpRequest();

        xhr.open("POST", url, true); // 也可以使用POST方式,根据接口

        xhr.responseType = "blob"; // 返回类型blob

        // 定义请求完成的处理函数,请求前也可以增加加载框/禁用下载按钮逻辑

        xhr.onload = function () {

          // 请求完成

          if (this.status === 200) {

            // 返回200

            var blob = this.response;

            var reader = new FileReader();

            reader.readAsDataURL(blob); // 转换为base64,可以直接放入a表情href

            reader.onload = function (e) {

              // 转换完成,创建一个a标签用于下载

              var a = document.createElement("a");

              a.download = name + ".xls";

              a.href = e.target.result;

              $("body").append(a); // 修复firefox中无法触发click

              a.click();

              resolve(200)

              $(a).remove();

            };

          }

        };

        // 发送ajax请求

        xhr.send(formData);

      })

    };

    七、download.js

    我粘贴一下download的源码

    //download.js v4.2, by dandavis; 2008-2016. [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. 3.1 improved safari handling.

    // v4 adds AMD/UMD, commonJS, and plain browser support

    // v4.1 adds url download capability via solo URL argument (same domain/CORS only)

    // v4.2 adds semantic variable names, long (over 2MB) dataURL support, and hidden by default temp anchors

    // https://github.com/rndme/download

    (function (root, factory) {

        if (typeof define === 'function' && define.amd) {

            // AMD. Register as an anonymous module.

            define([], factory);

        } else if (typeof exports === 'object') {

            // Node. Does not work with strict CommonJS, but

            // only CommonJS-like environments that support module.exports,

            // like Node.

            module.exports = factory();

        } else {

            // Browser globals (root is window)

            root.download = factory();

      }

    }(this, function () {

        return function download(data, strFileName, strMimeType) {

            var self = window, // this script is only for browsers anyway...

                defaultMime = "application/octet-stream", // this default mime also triggers iframe downloads

                mimeType = strMimeType || defaultMime,

                payload = data,

                url = !strFileName && !strMimeType && payload,

                anchor = document.createElement("a"),

                toString = function(a){return String(a);},

                myBlob = (self.Blob || self.MozBlob || self.WebKitBlob || toString),

                fileName = strFileName || "download",

                blob,

                reader;

                myBlob= myBlob.call ? myBlob.bind(self) : Blob ;

         

            if(String(this)==="true"){ //reverse arguments, allowing download.bind(true, "text/xml", "export.xml") to act as a callback

                payload=[payload, mimeType];

                mimeType=payload[0];

                payload=payload[1];

            }

            if(url && url.length< 2048){ // if no filename and no mime, assume a url was passed as the only argument

                fileName = url.split("/").pop().split("?")[0];

                anchor.href = url; // assign href prop to temp anchor

                  if(anchor.href.indexOf(url) !== -1){ // if the browser determines that it's a potentially valid url path:

                    var ajax=new XMLHttpRequest();

                    ajax.open( "GET", url, true);

                    ajax.responseType = 'blob';

                    ajax.οnlοad= function(e){

                      download(e.target.response, fileName, defaultMime);

                    };

                    setTimeout(function(){ ajax.send();}, 0); // allows setting custom ajax headers using the return:

                    return ajax;

                } // end if valid url?

            } // end if url?

            //go ahead and download dataURLs right away

            if(/^data:[w+-]+/[w+-]+[,;]/.test(payload)){

           

                if(payload.length > (1024*1024*1.999) && myBlob !== toString ){

                    payload=dataUrlToBlob(payload);

                    mimeType=payload.type || defaultMime;

                }else{           

                    return navigator.msSaveBlob ?  // IE10 can't do a[download], only Blobs:

                        navigator.msSaveBlob(dataUrlToBlob(payload), fileName) :

                        saver(payload) ; // everyone else can save dataURLs un-processed

                }

                

            }//end if dataURL passed?

            blob = payload instanceof myBlob ?

                payload :

                new myBlob([payload], {type: mimeType}) ;

            function dataUrlToBlob(strUrl) {

                var parts= strUrl.split(/[:;,]/),

                type= parts[1],

                decoder= parts[2] == "base64" ? atob : decodeURIComponent,

                binData= decoder( parts.pop() ),

                mx= binData.length,

                i= 0,

                uiArr= new Uint8Array(mx);

                for(i;i<mx;++i) uiArr[i]= binData.charCodeAt(i);

                return new myBlob([uiArr], {type: type});

             }

            function saver(url, winMode){

                if ('download' in anchor) { //html5 A[download]

                    anchor.href = url;

                    anchor.setAttribute("download", fileName);

                    anchor.className = "download-js-link";

                    anchor.innerHTML = "downloading...";

                    anchor.style.display = "none";

                    document.body.appendChild(anchor);

                    setTimeout(function() {

                        anchor.click();

                        document.body.removeChild(anchor);

                        if(winMode===true){setTimeout(function(){ self.URL.revokeObjectURL(anchor.href);}, 250 );}

                    }, 66);

                    return true;

                }

                // handle non-a[download] safari as best we can:

                if(/(Version)/(d+).(d+)(?:.(d+))?.*Safari//.test(navigator.userAgent)) {

                    url=url.replace(/^data:([w/-+]+)/, defaultMime);

                    if(!window.open(url)){ // popup blocked, offer direct download:

                        if(confirm("Displaying New Document Use Save As... to download, then click back to return to this page.")){ location.href=url; }

                    }

                    return true;

                }

                //do iframe dataURL download (old ch+FF):

                var f = document.createElement("iframe");

                document.body.appendChild(f);

                if(!winMode){ // force a mime that will download:

                    url="data:"+url.replace(/^data:([w/-+]+)/, defaultMime);

                }

                f.src=url;

                setTimeout(function(){ document.body.removeChild(f); }, 333);

            }//end saver

            if (navigator.msSaveBlob) { // IE10+ : (has Blob, but not a[download] or URL)

                return navigator.msSaveBlob(blob, fileName);

            }

            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===toString ){

                    try{

                        return saver( "data:" +  mimeType   + ";base64,"  +  self.btoa(blob)  );

                    }catch(y){

                        return saver( "data:" +  mimeType   + "," + encodeURIComponent(blob)  );

                    }

                }

                // Blob but not URL support:

                reader=new FileReader();

                reader.οnlοad=function(e){

                    saver(this.result);

                };

                reader.readAsDataURL(blob);

            }

            return true;

        }; /* end download() */

    }));

    用法:

    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/ 

  • 相关阅读:
    前端面试
    (知乎)我想问一下PHP的学习路线图
    sublime text3如何安装bootstrap的插件
    php项目开发经验-2个月学习php经历
    基于链接的基本排序算法原理
    焦大:特征权重的处理与最终排名(中)
    焦大:特征权重的处理与最终排名(下)
    如何分析和监测竞争对手网站的seo数据
    没收录的页面是否会传递权重
    想学习SEO可以看哪些书籍
  • 原文地址:https://www.cnblogs.com/songsu/p/13329426.html
Copyright © 2020-2023  润新知