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 相关文章推荐
asp.net和asp下ACCESS的参数化查询
Jun 11 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
May 10 Javascript
简单实现Bootstrap标签页
Aug 09 Javascript
ES6新特性五:Set与Map的数据结构实例分析
Apr 21 Javascript
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 Javascript
简单的Vue SSR的示例代码
Jan 12 Javascript
详解vue-cli3使用
Aug 14 Javascript
vue首次赋值不触发watch的解决方法
Sep 11 Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 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实现搜索时记住状态的方法示例
2018/05/11 PHP
childNodes.length与children.length的区别
2009/05/14 Javascript
jQuery 使用手册(四)
2009/09/23 Javascript
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
vue.js实现的绑定class操作示例
2018/07/06 Javascript
一文读懂ES7中的javascript修饰器
2019/05/06 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
Django验证码的生成与使用示例
2017/05/20 Python
Python语言实现将图片转化为html页面
2017/12/06 Python
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
python生成特定分布数的实例
2019/12/05 Python
在keras里实现自定义上采样层
2020/06/28 Python
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
主题酒店策划书
2014/01/28 职场文书
社区国庆节活动方案
2014/02/05 职场文书
公司合作协议书范本
2014/04/18 职场文书
公司投资建议书
2014/05/16 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
租车协议书
2015/01/27 职场文书
加薪通知
2015/04/25 职场文书
运动会广播稿300字
2015/08/19 职场文书
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技