前端接收java后端返回base64二进制流下载mp4

最近遇到个关于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 = hrefUrl
    a.download = '测试.mp4'
    a.style.display='none'
    document.body.appendChild(a)
    a.click()
    a.remove()
  }
})

最后

以上就是朴实小伙为你收集整理的前端接收java后端返回base64二进制流下载mp4的全部内容，希望文章能够帮你解决前端接收java后端返回base64二进制流下载mp4所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。