后端传二进制文件流，vue前端接收并下载

需求背景：后端传递一个zip包，在控制台打印出现如下：

前端需要下载到本地。

我尝试了很多办法，好不容易能下载下来了，打开显示：

我一直没有解决，我那很强的老板一看，说是后端那边的问题，emmm，一下子就放松了，哈哈哈。我那很强的后端大佬三下五除二改好了，还发我几个可行的前端方法，如下：

这两个方法都是写在button的点击事件中，点击之后触发。

方法一：

fetch('资源的路径')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok ' + response.statusText);
        }
        return response.blob();
    })
    .then(blob => {
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        a.download = ''; // 下载时不需要指定文件名，浏览器会使用服务器发送的文件名
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
    })
    .catch(error => console.error('There was a problem with the fetch operation:', error));

方法二：

window.location.href = '资源路径';

我一开始对这个方法二嗤之以鼻，没想到它居然真的可行，真强！

对这两个方法，我还有一些没懂的地方，所以本文只是分享或许可行的方法。

如果本文对你有帮助，希望能得到你的点赞或收藏或关注，这是对我最好的鼓励；

如你有问题或疑惑，欢迎在评论区写下，必将努力解答；

如本文有误区，希望你不吝赐教，让我们共勉！