ant-design下载二进制字节流文件

今天在做一个项目的时候遇到了一个问题。

其实下在文件是很简单的一件事情。但是使用到前后分离的这个概念，下载文件就变得稍微有一点点复杂了。

因为用户使用的是前端路由。而不能够直接使用后端的路由

所有任何操作都要通过API来实现

这样的话即使服务器上面有文件也很难下载。

因为链接不能够直达

所有我就用服务器返回我们需要下载文件的二进制字节流格式

然后在前端直接下载即可。但是由于经过前端的一层layer所以最好就是下载小文件。大文件就不必使用这种方法了

首先我们在前端ant-design中新建一个路由

export async function download(id) {
    return request(`/api/testadmin/download_template/${id}`,{
        responseType : 'blob'
    })
}

注意⚠️responseType一定要为blob

然后在模型中写一个方法effect

*_download({ id }, { call }) {
            return yield call(download, id)
        }

然后就可以直接下载保存了

if (window.navigator.msSaveOrOpenBlob) {
                navigator.msSaveBlob(temp_data, '项目必要文件.zip');
            } else {
                const link = document.createElement('a');
                const evt = document.createEvent('MouseEvents');
                link.style.display = 'none';
                link.href = window.URL.createObjectURL(temp_data);
                link.download = '项目必要文件.zip';
                document.body.appendChild(link); // 此写法兼容可火狐浏览器
                evt.initEvent('click', false, false);
                link.dispatchEvent(evt);
                document.body.removeChild(link);
            }

后端的代码我就不贴了