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

前端开发 作者: 2024-08-22 12:00:01
最近在做一个前端vue.js对接的功能模块时,需要实现一个下载图片的功能,后台返回来的是一串图片url,试了很多种方法,发现点击下载时出来的效果,都是跳到一个新的图片网页,后来经过一番琢磨,终于解决了
<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     },
 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 }
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_66654.html