使用a链接下载图片

Posted 2021-01-12 jxl-blog

在做a链接下载图片的时候遇到一个问题，在谷歌浏览器下只是新建了一个窗口，并没有实现下载。浏览器版本信息

经过实测，在谷歌下a链接实现下载图片必须具备两个条件。1，必须在启动服务，在服务器下运行。2，必须使用相对路径。

下面附上兼容写法代码：

<ul>
    <li><span>本人照片：</span><img src="0.JPG" alt=""><a href="javascript:void(0);" onclick="down_img(this)">点击下载</a>
        </li>
    <li><span>护照首页：</span><img src="1.jpg"alt=""><a href="javascript:void(0);" onclick="down_img(this)">点击下载</a>
        </li>
</ul>
    

function myBrowser() {
            var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
            var isOpera = userAgent.indexOf("Opera") > -1;
            if (isOpera) {
                return "Opera"
            }; //判断是否Opera浏览器
            if (userAgent.indexOf("Firefox") > -1) {
                return "FF";
            } //判断是否Firefox浏览器
            if (userAgent.indexOf("Chrome") > -1) {
                return "Chrome";
            }
            if (userAgent.indexOf("Safari") > -1) {
                return "Safari";
            } //判断是否Safari浏览器
            if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
                return "IE";
            }; //判断是否IE浏览器
            if (userAgent.indexOf("Trident") > -1) {
                return "Edge";
            } //判断是否Edge浏览器
        }

    //②IE浏览器图片保存（IE其实用的就是window.open)
    function SaveAs5(imgURL) {
        var oPop = window.open(imgURL, "", "width=1, height=1, top=5000, left=5000");
        for (; oPop.document.readyState != "complete";) {
            if (oPop.document.readyState == "complete") break;
        }
        oPop.document.execCommand("SaveAs");
        oPop.close();
    }

    //④点击事件下载（只需更改图片路径即可）
    function down_img(a) {
        var osb = a;
        var sb = a.previousSibling.src;
        // console.log(sb)
        if (myBrowser() === "IE" || myBrowser() === "Edge") {
            //IE （浏览器）
            SaveAs5(sb);
        } else {
            //!IE (非IE)
            osb.href = sb;
            osb.download = "";
        }
    }