angular中下载接口返回文件

目录

一、URL.createObjectURL()

一、URL.createObjectURL()

createObjectURL属于js的原生方法,位于window.URL上,用于将Blob或者File文件转换为可以临时的URL地址进行显示

**注意**:Angular 的 HttpClient 默认将响应解析为 JSON 对象‌16。若实际返回的是二进制数据(如 Excel 文件、图片等),解析过程会因格式不匹配抛出错误(如 Unexpected token[object Object]

TypeScript 复制代码
//首先调接口,subscribe接收一个可观察对象,
//有三个可选函数,next为成功时的函数,此时返回的二进制文件,
//包含size和type两个属性,使用createObjectURL将二进制文件转换为url地址,
//再创建a标签,实现自动下载返回的文件,最后需要释放创建的地址(生成的 URL 会占用内存,需手动释放以避免泄漏)
//error为出错时所调函数       
this.service.importExcel(formData).subscribe({
                next: (blob: Blob) => {
                    console.log(blob);
                     if (blob.size > 0 && blob.type.startsWith('application/')) {
                         const url = window.URL.createObjectURL(blob);
                         const link = document.createElement('a');
                         link.href = url;
                         link.download = '导入人员信息.xlsx'; // 自定义文件名
                         link.click();
                        window.URL.revokeObjectURL(url); // 释放内存
                     }
                },
                error: (error: any) => {
                    this.message.warning('文件异常');
                },
            });

//需要将接口的响应数据改为Blob二进制文件,使用responseType修改响应数据类型为Blob
 importExcel(params) {
        const url = 'api/xxx';
        return this.http.post(url, params, {
            responseType: 'blob',//有时候会报错则使用'blob' as 'json'
        });
    }
相关推荐
Zuckjet_1 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
2401_863801461 小时前
探索 12 种 3D 文件格式:综合指南
前端·3d
珍宝商店3 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown3 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
YAY_tyy3 小时前
【JavaScript 性能优化实战】第六篇:性能监控与自动化优化
javascript·性能优化·自动化
gnip4 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿4 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
闭着眼睛学算法5 小时前
【华为OD机考正在更新】2025年双机位A卷真题【完全原创题解 | 详细考点分类 | 不断更新题目 | 六种主流语言Py+Java+Cpp+C+Js+Go】
java·c语言·javascript·c++·python·算法·华为od
烛阴5 小时前
【TS 设计模式完全指南】构建你的专属“通知中心”:深入观察者模式
javascript·设计模式·typescript
lumi.5 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js