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对象是否存在
Sep 22 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
Apr 20 Javascript
ActiveX控件与Javascript之间的交互示例
Jun 04 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
Jan 05 Javascript
javascript 实现map集合
Apr 03 Javascript
关于javascript获取内联样式与嵌入式样式的实例
Jun 01 Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 Javascript
JavaScript创建对象方法实例小结
Sep 03 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
微信小程序实现单选选项卡切换效果
Jun 19 Javascript
vue组件是如何解析及渲染的?
Jan 13 Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
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
自己动手,丰衣足食 - 短波框形天线制作
2021/03/01 无线电
967 个函式
2006/10/09 PHP
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
获得Google PR值的PHP代码
2007/01/28 PHP
自己写的php中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
利用JS进行图片的切换即特效展示图片
2013/12/03 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
JavaScript实现图片切换效果
2017/08/12 Javascript
nodejs动态创建二维码的方法
2017/08/12 NodeJs
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
Python实现简易Web爬虫详解
2018/01/03 Python
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
python实现统计文本中单词出现的频率详解
2019/05/20 Python
python3 使用Opencv打开USB摄像头,配置1080P分辨率的操作
2019/12/11 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
美国婚礼礼品网站:MyWeddingFavors
2018/09/26 全球购物
俄罗斯茶和咖啡网上商店:Tea.ru
2021/01/26 全球购物
大学生村官事迹材料
2014/01/21 职场文书
运动会广播稿500字
2014/01/28 职场文书
大学生党性分析材料
2014/12/19 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
Oracle使用别名的好处
2022/04/19 Oracle