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

 

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

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

下载执照

 

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, 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, name) {

2 let eleLink = document.createElement('a')

3 eleLink.download = name

4 eleLink.href = href

5 eleLink.click()

6 eleLink.remove()

7 }

 

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

 

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

 

查看原文