文件下载-前端发请求后端返回二进制文件

1.前端发请求（axios为例）

request({
        url: "/export",
        method: 'post',
        responseType: 'blob',
        data: data
    }).then((response) => {
      debugger
        if (response.type === 'application/json') {
            alert("设置时间或当前时间暂无数据");
        } else {
            const blob = response;
            const downloadLink = document.createElement('a');
            downloadLink.href = window.URL.createObjectURL(blob);
            downloadLink.download = fileName;
            downloadLink.click();
            window.URL.revokeObjectURL(downloadLink.href); // Clean up the URL object
        }
    }).catch((error) => {
        console.error('请求失败:', error);
    });

2.详细解释

2.1说明

说明：发送一个 POST 请求到 /export 接口，并处理响应内容，响应内容可能是一个二进制文件（blob）。

2.2处理响应部分

.then((response) => {
    debugger
    if (response.type === 'application/json') {
        alert("设置时间或当前时间暂无数据");
    } else {
        const blob = response;
        const downloadLink = document.createElement('a');
        downloadLink.href = window.URL.createObjectURL(blob);
        downloadLink.download = fileName;
        downloadLink.click();
        window.URL.revokeObjectURL(downloadLink.href); // 清理URL对象
    }
})

• then 方法用来处理请求成功后的响应。response 是服务器返回的数据。
• debugger 会在开发者工具中暂停代码执行，便于调试。
• 判断响应类型：
  • 如果 response.type === 'application/json'，说明服务器返回的是 JSON 数据（而不是文件）。此时，弹出一个提示框 alert("设置时间或当前时间暂无数据")，提示用户当前没有可下载的数据。
  • 否则，表示服务器返回的是一个文件（二进制数据）。
• 处理文件下载：
  • const blob = response; 将服务器返回的二进制数据赋值给 blob。
  • document.createElement('a') 创建一个 <a> 标签，用来触发文件下载。
  • window.URL.createObjectURL(blob) 将 blob 转换为一个 URL 资源。
  • downloadLink.download = fileName; 设置下载文件的名称。
  • downloadLink.click(); 模拟点击 <a> 标签，触发浏览器的下载动作。
  • window.URL.revokeObjectURL(downloadLink.href); 在下载完成后，撤销该 URL，释放内存。

2.3 处理错误部分

.catch((error) => {
    console.error('请求失败:', error);
});

3.总结

这段代码的主要功能是通过 POST 请求导出一个文件，处理服务器返回的文件数据或 JSON 数据。如果返回文件，则自动生成并下载；如果返回 JSON 数据，则提示用户没有数据。