原创/朱季谦

最近在做一个前端vue.js对接的功能模块时,需要实现一个下载图片功能后台返回来的是一串图片url,试了很多种方法,发现点击下载时出来的效果,都是跳到一个新的图片网页,后来经过一番琢磨,终于解决了这个问题

这是后台返回来的json数据(防止泄露重要信息IP地址打码了):

 我在html里的引用是这样的:

<a @click="downCom" &gt;
     下载执照
     <i class="icon-down"&gt;</i&gt;
 </a&gt;

vue.js方法里的下载图片方法

   
      downCom() {
        let that = this;
        this.$http.files().then(res =&gt; {
          let hreLocal="";
          hreLocal = res.data.data.url;
          this.downloadByBlob(hreLocal,"pic")
       
        });
     },

下面这个方法,可以直接拿去用,直接把你的图片url传给这个方法,就可以实现vue.js来下载图片了。

    downloadByBlob(url,name) {
      let image = new Image()
      image.setAttribute('crossOrigin', 'anonymous')
      image.src = url
      image.onload = () => {
        let canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        let ctx = canvas.getContext('2d')
        ctx.drawImage(image, 0, 0, image.width, image.height)
        canvas.toBlob((blob) => {
         let url = URL.createObjectURL(blob)
         download(url,name)
         // 用完释放URL对象
         URL.revokeObjectURL(url)
       })
     }
   },
调用的download(url,name)方法:

 function download(href, name) {
   let eleLink = document.createElement('a')
   eleLink.download = name
   eleLink.href = href
   eleLink.click()
   eleLink.remove()
 }

完成上面的代码后,即可实现图片下载,而不是图片浏览啦。

最后成功实现点击即可下载图片,效果图如下:

原文地址:https://blog.csdn.net/weixin_40706420/article/details/134638630

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_2313.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注