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

143 阅读 0 评论 95 点赞

我是靠谱客的博主朴实小伙，这篇文章主要介绍前端接收java后端返回base64二进制流下载mp4，现在分享给大家，希望可以做个参考。

最近遇到个关于mp4视频下载的需求，以前只做过文件的下载，觉得原理是差不多。又查了很多vue文件下载的文章，经过筛选排查最后总结出了以下这两种方法。

第一种：

正常的base64视频流的显示是这样子的 data:video/mp4;base64，二进制

使用a标签的href就拼接成上面的格式要求调用，就可以下载下来

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
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标签下载视频

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//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()
  }
})