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'
        });
    }
相关推荐
JosieBook32 分钟前
【SpringBoot】21-Spring Boot中Web页面抽取公共页面的完整实践
前端·spring boot·python
吃饭睡觉打豆豆嘛1 小时前
深入剖析 Promise 实现:从原理到手写完整实现
前端·javascript
前端端1 小时前
claude code 原理分析
前端
GalaxyMeteor1 小时前
Elpis 开发框架搭建第二期 - Webpack5 实现工程化建设
前端
Spider_Man1 小时前
从 “不会迭代” 到 “面试加分”:JS 迭代器现场教学
前端·javascript·面试
我的写法有点潮1 小时前
最全Scss语法,赶紧收藏起来吧
前端·css
小高0071 小时前
🧙‍♂️ 老司机私藏清单:从“记事本”到“旗舰 IDE”,我只装了这 12 个插件
前端·javascript·vue.js
Mo_jon2 小时前
css 遮盖滚动条,鼠标移上显示
前端·css
EveryPossible2 小时前
终止异步操作
前端·javascript·vue.js
Stringzhua2 小时前
setup函数相关【3】
前端·javascript·vue.js