最近在做一个前端vue.js对接的功能模块时，需要实现一个下载图片的功能，后台返回来的是一串图片url，试了很多种方法，发现点击下载时出来的效果，都是跳到一个新的图片网页，后来经过一番琢磨，终于解决了这个问题：
这是后台返回来的json数据（防止泄露重要信息IP地址打码了）：
我在html里的引用是这样的：
<a @click="downCom" >
下载执照
<i class="icon-down"></i>
</a>
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 },
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 }
