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中Array 对象相关的几个方法
Dec 22 Javascript
JavaScript中的无阻塞加载性能优化方案
Oct 10 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
Aug 28 Javascript
AngularJS 如何在控制台进行错误调试
Jun 07 Javascript
jQuery+CSS3实现点赞功能
Mar 13 Javascript
Vue分页组件实例代码
Apr 17 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 Javascript
原生JS实现的简单小钟表功能示例
Aug 30 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 Javascript
vue-cli脚手架的安装教程图解
Sep 02 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
Nov 30 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不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
如何用php获取文件名后缀
2013/06/09 PHP
php密码生成类实例
2014/09/24 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
2010/10/11 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
如何检测JavaScript的各种类型
2016/07/30 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
form表单数据封装成json格式并提交给服务器的实现方法
2017/12/14 Javascript
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
JS实现遍历不规则多维数组的方法
2018/03/21 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
python发送邮件实例分享
2017/07/28 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
Python学习笔记之Break和Continue用法分析
2019/08/14 Python
python+selenium+Chrome options参数的使用
2020/03/18 Python
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
Herschel Supply Co.美国:背包、手提袋及配件
2020/11/24 全球购物
法律专业个人实习自我鉴定
2013/09/23 职场文书
应用数学自荐书范文
2013/11/24 职场文书
创建青年文明号材料
2014/05/09 职场文书
上党课的心得体会
2014/09/02 职场文书
迎国庆演讲稿
2014/09/15 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
世界红十字日活动总结
2015/02/10 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
穆斯林的葬礼读书笔记
2015/06/26 职场文书
红白喜事主持词
2015/07/06 职场文书
运动会加油稿
2015/07/22 职场文书
关于python中模块和重载的问题
2021/11/02 Python