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,"营业执照")
 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 }

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏杰的记事本

一些原生写法可以替代Jquery方法

jQuery的核心是通过各种选择器,选中DOM元素,可以用querySelectorAll方法模拟这个功能。

17920
来自专栏人工智能机器学习

CTF从入门到提升(十)文件上传

白名单和上一节讲的黑名单的区别在哪里?黑名单是未经许可非法用户禁止入内,我禁止某些人入内,大部分人是可以进去的。白名单是未经允许禁止入内,只有允许的人才能进入,...

26400
来自专栏杰的记事本

CSS实线边框渐变以及虚线边框渐变

给border-image加linear-gradient不难理解,但是如果单纯使用border-image,会发现效果是这样的:

41320
来自专栏杰的记事本

SVG 图标在React项目中的优化

官方文档:https://webpack.docschina.org/loaders/url-loader/

14410
来自专栏杰的记事本

注意IE下Ajax Get缓存的问题

​ 常见的是ajax请求过一次以后,以后的相同url的get请求会存在下面这种情况:

11820
来自专栏杰的记事本

HTML5 download属性无效的问题

如果url指向第三方资源,download会失效,表现和不使用download时一致——浏览器能打开的文件,浏览器会直接打开,不能打开的文件,会直接下载。浏览器...

32130
来自专栏web秀

关于 ES6 中 Promise 的面试题

最近在复习 Promise 的知识,所以就做了一些题,这里挑出几道题,大家一起看看吧。

6920
来自专栏杰的记事本

img标签不同设备加载不同尺寸的图片的几种方法

一般来说,桌面端显示的是大尺寸的图像,文件体积较大。手机的屏幕较小,只需要小尺寸的图像,可以节省带宽,加速网页渲染。

27510
来自专栏杰的记事本

escape() VS encodeURI() VS encodeURIComponent()的区别

JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unes...

8110
来自专栏AI研习社

实践是最好的老师:给中级 Python 开发人员的 13 个项目构想

学习 python 的基础知识是一种美妙的体验。但是,学习的喜悦可以被对实践项目的渴望所取代。想要建立项目是正常的,因此需要对项目的构想。

10610

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励