最近遇到個關于mp4視頻下載的需求，以前只做過文件的下載，覺得原理是差不多。又查了很多vue文件下載的文章，經過篩選排查最后總結出了以下這兩種方法。

---

第一種：

正常的base64視頻流的顯示是這樣子的?data:video/mp4;base64，二進制

使用a標簽的href就拼接成上面的格式要求調用，就可以下載下來

downloadFile(url).then(res=>{if (res.data.code==200){let arr = res.data.data // base64二進制加上前綴data:video/mp4;base64，const source = `data:video/mp4;base64,${arr}`;const link = document.createElement('a');link.href = source;link.download = fileName; //文件名link.click();} })

第二種：把base64轉為blob對象方法，轉為blob視頻鏈接；在用window.URL.createObjectURL獲得一個http格式的url路徑；最后使用a標簽下載視頻

//base64視頻流轉為blob對象 dataURLtoBlob(dataurl) {let arr = dataurl;let bstr = atob(arr.replace(/\s/g, ''));let n = bstr.length;let u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], {type : 'video/mp4'}); },downloadFile(url).then(res=>{if (res.data.code==200){let arr = res.data.data let blob = this.dataURLtoBlob(arr) //調用方法 let hrefUrl = window.URL.createObjectURL(blob)console.log(hrefUrl,'blob')let a = document.createElement('a')a.href = hrefUrla.download = '測試.mp4'a.style.display='none'document.body.appendChild(a)a.click()a.remove()} })

總結

以上是生活随笔為你收集整理的前端接收java后端返回base64二进制流下载mp4的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。