码迷,mamicode.com
首页 > Web开发 > 详细

js下载图片

时间:2020-04-26 13:51:33      阅读:69      评论:0      收藏:0      [点我收藏+]

标签:tmp   one   javascrip   mouse   cti   为知笔记   art   const   data-   

TOC

js下载图片

使用超链接下载图片的时候,会变成预览,使用下面的方法,就可以直接下载图片了

      downUrl(url) {
        // window.open(_this.detail.imgUrl)
        let xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", url, true);
        xmlhttp.responseType = "blob";
        xmlhttp.onload = function () {
          if (this.status == 200) {
            const blob = this.response;
            const link = document.createElement(‘a‘);
            link.href = window.URL.createObjectURL(blob);
            link.download = url.substring(url.lastIndexOf("/") + 1, url.length);


            //此写法兼容可火狐浏览器
            document.body.appendChild(link);


            const evt = document.createEvent("MouseEvents");
            evt.initEvent("click", false, false);
            link.dispatchEvent(evt);
            window.URL.revokeObjectURL(link.href)
            document.body.removeChild(link);
          }
          ;
        }
        xmlhttp.send();
      }




js下载图片

标签:tmp   one   javascrip   mouse   cti   为知笔记   art   const   data-   

原文地址:https://www.cnblogs.com/ziyue7575/p/ee8551530c54f59fa163f01a0f171168.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!