网站运营有什么用,创意网名女,郑州 互联网 公司网站,织梦网站怎么做模板原创/朱季谦 最近在做一个前端vue.js对接的功能模块时#xff0c;需要实现一个下载图片的功能#xff0c;后台返回来的是一串图片url#xff0c;试了很多种方法#xff0c;发现点击下载时出来的效果#xff0c;都是跳到一个新的图片网页#xff0c;后来经过一番琢磨…原创/朱季谦 最近在做一个前端vue.js对接的功能模块时需要实现一个下载图片的功能后台返回来的是一串图片url试了很多种方法发现点击下载时出来的效果都是跳到一个新的图片网页后来经过一番琢磨终于解决了这个问题 这是后台返回来的json数据防止泄露重要信息IP地址打码了 我在html里的引用是这样的
a clickdownCom 下载执照i classicon-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)})}},
调用的downloadurl,name方法 function download(href, name) {let eleLink document.createElement(a)eleLink.download nameeleLink.href hrefeleLink.click()eleLink.remove()} 完成上面的代码后即可实现图片下载而不是图片浏览啦。 最后成功实现点击即可下载图片效果图如下
