vue.js如何根据后台返回来的图片url进行图片下载

 

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

 

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

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

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

 

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

 1  
 2     downCom() {
 3       let that = this;
 4       this.$http.files().then(res => {
 5         let hreLocal="" 6         hreLocal = res.data.data.url;
 7         this.downloadByBlob(hreLocal,"pic")
 8      
 9       });
10     },

 

 

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

 1   downloadByBlob(url,name) {
 2     let image = new Image()
 3     image.setAttribute('crossOrigin','anonymous' 4     image.src = url
 5     image.onload = () => 6       let canvas = document.createElement('canvas' 7       canvas.width = image.width
 8       canvas.height = image.height
 9       let ctx = canvas.getContext('2d'10       ctx.drawImage(image,0,image.width,image.height)
11       canvas.toBlob((blob) =>12         let url = URL.createObjectURL(blob)
13         download(url,name)
14         // 用完释放URL对象
15         URL.revokeObjectURL(url)
16       })
17     }
18   },

 

 

调用的download（url,name）方法：

1 function download(href,1)">2   let eleLink = document.createElement('a'3   eleLink.download = name
4   eleLink.href = href
5   eleLink.click()
6   eleLink.remove()
7 }

 

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

 

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