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 相关文章推荐
JavaScript 实现??打印?理
Apr 28 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
jquery动态改变div宽度和高度
Feb 09 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
js父页面中使用子页面的方法
Jan 09 Javascript
深入理解javascript函数参数与闭包
Dec 12 Javascript
Vue.use源码分析
Apr 22 Javascript
深入理解React中何时使用箭头函数
Aug 23 Javascript
仿京东快报向上滚动的实例
Dec 13 Javascript
Vue组件之自定义事件的功能图解
Feb 01 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
node 版本切换的实现
Feb 02 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强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
php生成RSS订阅的方法
2015/02/13 PHP
PHP获取文件夹内文件数的方法
2015/03/12 PHP
Smarty环境配置与使用入门教程
2016/05/11 PHP
js控制div及网页相关属性的代码
2009/12/19 Javascript
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
bootstrap组件之导航组件使用方法
2017/01/19 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
vscode自定义vue模板的实现
2021/01/27 Vue.js
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
[30:51]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第一局
2016/03/04 DOTA
python实现图片处理和特征提取详解
2017/11/13 Python
详解Python中where()函数的用法
2018/03/27 Python
利用Python正则表达式过滤敏感词的方法
2019/01/21 Python
python 字符串格式化的示例
2020/09/21 Python
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
英国山地公路自行车商店:Tweeks Cycles
2018/03/16 全球购物
商场消防管理制度
2014/01/12 职场文书
《奇妙的国际互联网》 教学反思
2014/02/25 职场文书
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
大学优秀班主任事迹材料
2014/05/02 职场文书
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
2014年化工厂工作总结
2014/11/25 职场文书
Python实现日志实时监测的示例详解
2022/04/06 Python
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python