前端vue3把二进制文件流转文件下载到浏览器

今天写了项目的时候，跟后端对下载文件的接口遇到了axios每次下载文件都会出现文件损坏的问题，后来磨了好久，换了fetch才得以解决，具体原因应该是：

• fetch 号称是 AJAX 的替代品，在 ES6 中出现，使用了ES6 中的 promise 对象。Fetch 是基于 promise 设计的。
• Fetch 的代码结构比起 ajax 简单多了， 参数有点像 JQuery ajax。 但是，一定要记住： fetch 不是 ajax的进一步封装，而是原生 JS ， 没有使用 XMLHttpRequest 对象。
  下载文件一般有两种方式：
• 一种是后端直接提供链接的方式，前端直接a标签跳转去下载
• 第二种是后端提供二进制文件流

因为文件涉及到权限问题，所以使用了二进制的方式下载文件
这里目前只能使用fetch，不知道有没有其他方法
直接贴代码吧：

const file = ()=>{
    let url='';
    fetch(url, {
        method: "get",
        headers: { "token": getCookie("token") },
        }).then(res=>res.blob()).then((res) => {
            const a = document.createElement('a');
            document.body.appendChild(a);
            a.style.display = 'none';
            // 指定下载路径
            const url = window.URL.createObjectURL(res);
            a.href = url;
            a.download = 'aaa.zip';
            a.click();
            // 移除a标签和url对象
            document.body.removeChild(a);
            window.URL.revokeObjectURL(url);
    })
}

如果解决了你的问题，记得点赞哦，哈哈哈