当前位置: 首页 > article >正文

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

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 数据,则提示用户没有数据。

原文地址:https://blog.csdn.net/m0_62785037/article/details/142025383
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.kler.cn/a/299571.html

相关文章:

  • 【Linux】常见指令
  • 在WinForm中使用全局异常捕获处理
  • 【Python报错已解决】 raise JSONDecodeError(“Expecting value“, s, err.value) from None
  • 编程环境常用命令合集
  • 可提示 3D 分割研究里程碑!SAM2Point:SAM2加持泛化任意3D场景、任意提示!
  • 前端文件预览,PDF,word,TXT
  • 项目日志——日志落地模块的设计、实现、测试
  • windows上.chm文件打不开
  • 【Hot100】LeetCode—139. 单词拆分
  • 苹果三款Mac新品十月登场:标配M4系列芯片
  • mysql学习教程,从入门到精通,MySQL WHERE 子句(10)
  • 【区块链通用服务平台及组件】ESGC 基准报告应用 | FISCO BCOS应用案例
  • kubeadm 初始化 k8s 证书过期解决方案
  • 跨部门SOP与统一知识库:打破信息孤岛,促进团队协作
  • Console函数的所有使用方式详解比较
  • Redis 缓存深度解析:穿透、击穿、雪崩与预热的全面解读
  • 如果 Android 手机出现数据丢失,如何在Android上恢复丢失的数据
  • 蓝光3D扫描仪用于小尺寸精密注塑零件三维检测
  • HarmonyOs 应用基础--ArkTS-核心-基础
  • 深入掌握大模型精髓:《实战AI大模型》带你全面理解大模型开发!