zoukankan      html  css  js  c++  java
  • 使用a链接下载图片

    在做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 = "";
            }
        }

      

  • 相关阅读:
    001 spring AOP介绍
    026 spring事件机制--基础内容
    025 使用@Profile完成环境条件注入
    ExpandoObject使用
    企业微信接口问题
    企业号验证后携带URL参数跳转问题
    在创建一个MVC控制器,显示运行所选代码生成器时出错(带读写,使用EF)
    码栈批量提取淘宝后台的图图片空间图片
    码栈编码
    在微信里面打开链接,显示501 Not Implemented,但是同样的链接在其他浏览器是可以打开的。
  • 原文地址:https://www.cnblogs.com/jxl-blog/p/9791183.html
Copyright © 2011-2022 走看看