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 相关文章推荐
jQuery实战之品牌展示列表效果
Apr 10 Javascript
JS OffsetParent属性深入解析
Jan 13 Javascript
javascript动态向网页中添加表格实现代码
Feb 19 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
基于javascript实现按圆形排列DIV元素(一)
Dec 02 Javascript
element ui里dialog关闭后清除验证条件方法
Feb 26 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
vue filters的使用详解
Jun 11 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
Nov 15 Javascript
基于JS实现操作成功之后自动跳转页面
Sep 25 Javascript
js实现自定义滚动条的示例
Oct 27 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实现数组中索引关联数据转换成json对象的方法
2015/07/08 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
js 限制数字 js限制输入实现代码
2012/12/04 Javascript
jquery制作select列表双向选择示例代码
2014/09/02 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
JS使用eval()动态创建变量的方法
2016/06/03 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
vue.js中$watch的用法示例
2016/10/04 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
vue 指令之气泡提示效果的实现代码
2018/10/18 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
python三引号如何输入
2020/07/06 Python
Python 字典一个键对应多个值的方法
2020/09/29 Python
HTML5 body设置自适应全屏
2020/05/07 HTML / CSS
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
美国最大婚纱连锁店运营商:David’s Bridal
2019/03/12 全球购物
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
小学清明节活动方案
2014/03/08 职场文书
学习型班组申报材料
2014/05/31 职场文书
信息与计算机科学职业规划范文:成为一艘有方向的船
2014/09/11 职场文书
单位委托书
2014/10/15 职场文书
单位介绍信格式
2015/01/31 职场文书
劳动合同变更协议书范本
2019/04/18 职场文书
Java输出Hello World完美过程解析
2021/06/13 Java/Android
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技
Golang并发工具Singleflight
2022/05/06 Golang