vue.js如何根據後台返回來的圖片url進行圖片下載

  • 2019 年 10 月 5 日
  • 筆記

最近在做一個前端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 }

完成上面的程式碼後，即可實現圖片下載，而不是圖片瀏覽啦。

最後成功實現點擊即可下載圖片，效果圖如下：

Tags:

VirMach 便宜 VPS