2020-12-30

下载mp4文件流

问题：前端下载后端接口数据中的文件流

1.　首先在axios.post的请求中把默认的 " responseType:‘json’ " 改为" responseType:‘blob’

axios({
     method: 'get',
     url: debug.servers + '/TinklingCat/api/rechargeManage/exportPertrolRecord',
     responseType: 'blob',
     params: submitForm
})

2.请求成功之后下载视频流

Blob对象可以看做是存放二进制数据的容器，此外还可以通过Blob设置二进制数据的MIME类型。

通过url下载文件
window.URL对象可以为Blob对象生成一个网络地址，结合a标签的download属性，可以实现点击url下载文件

.then((res) => {
    if (!res) {
        return
    }    

   const blob = new Blob([res.data]);
   const fileName1 = fileName+'.mp4'; //下载文件名称
   const elink = document.createElement("a");
   elink.download = fileName1;
   elink.style.display = "none";
   elink.href = URL.createObjectURL(blob);
   document.body.appendChild(elink);
   elink.click();
   URL.revokeObjectURL(elink.href); // 释放URL 对象
   document.body.removeChild(elink);

})