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

原创/朱季谦

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

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

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

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

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

   downCom() {let that = this;this.$http.files().then(res => {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 = urlimage.onload = () => {let canvas = document.createElement('canvas')canvas.width = image.widthcanvas.height = image.heightlet 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 = nameeleLink.href = hrefeleLink.click()eleLink.remove()}

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

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