CSDN

前端实现文件下载功能——文件流

2023-08-29 00:08 由 星眼小橘 发表于 #前端开发

前端下载文件一般使用的是blob

核心的步骤是获取后端响应的文件流，用blob创建一个临时的URL，然后创建一个隐藏的<a>标签，实现下载需求。

那就先上代码

function download(item) {
    axios.get(getServerUrl() + "/teacher/output/" + classId.value + "/" + item, {
        responseType: 'blob', // 告诉浏览器响应类型是 Blob
    }).then((response) => {
        let blob = new Blob([response.data]);
        // 创建一个临时 URL，用于下载
        const url = URL.createObjectURL(blob);
        let fileName = item + '签到统计表.xls';
        const a = document.createElement('a');
        a.setAttribute('href', url);
        a.setAttribute('download', fileName);
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        // 释放临时 URL
        URL.revokeObjectURL(url);
    })
}

如果后端响应的数据是一个二进制数据，那我们就得这是响应类型是blob，否则浏览器会默认按照json解析

至于后端如何向前端以文件流的形式发送文件，请看我的上一个随笔Java后端向前端返回文件流——实现下载功能

是否会有朋友有个疑问，前端要不要在new BLob里面设置content-type，答案是不需要，其实你会发现设置与不设置效果一样，但如果后端没有设置，那么文件下载就会出问题。我之前在写一个web项目要实现一个下载功能，一直以为要前端规定格式，结果后端就没有设置，导致下载的文件格式错误。

所以说，只要后端的文件流正确，响应类型设置正确，前端只需要将responseType设置为blob即可。

热门相关：藏娇记事   大妆   豪门情变，渣总裁滚远点！   今天也没变成玩偶呢   今天也没变成玩偶呢