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 计算图片加载数量的代码
Jan 01 Javascript
jquery图片延迟加载 前端开发技能必备系列
Jun 18 Javascript
jquery 插件学习(五)
Aug 06 Javascript
ajax java 实现自动完成功能
Dec 19 Javascript
javascript学习(一)构建自己的JS库
Jan 02 Javascript
js 操作select与option(示例讲解)
Dec 20 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
Vue实现简单分页器
Dec 29 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 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
PHP的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
Yii2实现log输出到file及database的方法
2016/11/12 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
风吟的小型JavaScirpt库 (FY.JS).
2010/03/09 Javascript
Javascript中的window.event.keyCode使用介绍
2011/04/26 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
JavaScript中的对象与JSON
2015/07/03 Javascript
jQuery蓝色风格滑动导航栏代码分享
2015/08/19 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
2016/10/27 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
JavaScript的词法结构精华篇
2018/10/17 Javascript
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
详解vue 命名视图
2019/08/14 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
[41:08]TNC vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
Python中xrange与yield的用法实例分析
2017/12/26 Python
使用Python发现隐藏的wifi
2020/03/04 Python
HTML5 新标签全部总汇(推荐)
2016/06/13 HTML / CSS
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
店面销售职位的职责
2014/03/09 职场文书
地质灾害防治方案
2014/05/14 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
公司的力量观后感
2015/06/05 职场文书
围城读书笔记
2015/06/26 职场文书
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android