Angular利用HTTP POST下载流文件的步骤记录


Posted in Javascript onJuly 26, 2020

Angular / Vue HTTP POST下载流文件

HTTP POST 请求流文件转成excel

在使用Angular开发项目时,通常会有下载文件的功能项。一般是后台返回下载地址,通过 <a> 标题或者使用 window 打开下载地址新窗口,浏览器则会识别出流文件进行文件下载。

但是,有时候进行http异步请求,后台返回的并不是下载地址,而是直接返回一个文件流,这时如何使用http请求回来的文件流转换成文件下载?

其实并非Angular框架存地这样的情况,其他PWA如Vue,React甚至Jquery都通过http xhr进行请求而获取的流文件,浏览器也并不会自动识别并自动下载。

那当然,肯定有解决方案。

方案思路:

http请求使用blob的返回类型,获取文件流后,对数据进行Blob,再提交给浏览器进行识

下面是代码示例

/**
 * 导出excel
 */
exportExcel(){
 const params = {}; // body的参数
 const queryParams = undefined; // url query的参数
 this.http.post(this.exportUrl, params, queryParams, {
 responseType: "blob",
 headers: new HttpHeaders().append("Content-Type", "application/json")
 }).subscribe(resp=>{
 // resp: 文件流
 this.downloadFile(resp);
 })
}

/**
 * 创建blob对象,并利用浏览器打开url进行下载
 * @param data 文件流数据
 */
downloadFile(data) {
 // 下载类型 xls
 const contentType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
 // 下载类型:csv
 const contentType2 = 'text/csv';
 const blob = new Blob([data], { type: contentType });
 const url = window.URL.createObjectURL(blob);
 // 打开新窗口方式进行下载
 // window.open(url); 

 // 以动态创建a标签进行下载
 const a = document.createElement('a');
 const fileName = this.datePipe.transform(new Date(), 'yyyyMMdd');
 a.href = url;
 // a.download = fileName;
 a.download = fileName + '.xlsx';
 a.click();
 window.URL.revokeObjectURL(url);
}

总结

到此这篇关于Angular利用HTTP POST下载流文件的文章就介绍到这了,更多相关Angular用HTTP POST下载流文件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js prototype 格式化数字 By shawl.qiu
Apr 02 Javascript
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 Javascript
jQuery在html有效在jsp无效的原因及解决方法
Aug 02 Javascript
js字符串截取函数slice、substring和substr的比较
May 17 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
JavaScript初学者必看“new”
Jun 12 Javascript
浅谈JavaScript作用域和闭包
Sep 18 Javascript
vue实现仿淘宝结账页面实例代码
Nov 08 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
多个vue子路由文件自动化合并的方法
Sep 03 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
Nov 13 Javascript
JavaScript数组reduce()方法的语法与实例解析
Jul 07 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 #Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 #Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
Jul 26 #Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 #Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 #Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 #Javascript
vuex分模块后,实现获取state的值
Jul 26 #Javascript
You might like
PHP sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
通过PHP current函数获取未知字符键名数组第一个元素的值
2013/06/24 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
Laravel配合jwt使用的方法实例
2020/10/25 PHP
jquery分页对象使用示例
2014/04/01 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
JavaScript Math 对象常用方法总结
2016/04/28 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
基于百度地图api清除指定覆盖物(Overlay)的方法
2018/01/26 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
与UNIX有关的几个名词
2015/09/17 面试题
党委书记个人对照检查材料
2014/09/15 职场文书
临床医学生职业规划书范文
2014/10/25 职场文书
大学军训的体会
2014/11/08 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
展览会邀请函
2015/02/02 职场文书
辞职信标准格式
2015/02/27 职场文书
护士求职自荐信范文
2015/03/04 职场文书
论文评审意见
2015/06/05 职场文书
德能勤绩工作总结
2015/08/11 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers
PL350与SW11的比较
2021/04/22 无线电
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电
mysqldump进行数据备份详解
2022/07/15 MySQL