axios+post获取并下载后台返回的二进制流
axios+post获取并下载后台返回的二进制流
let url = $.getCookie('prefixUrl')+'/expenseword/exportWords';
let vm = this;
let len=vm.checkedIds.length;
if(len<){
Message('至少选择一条数据');
return false;
}
let ids = vm.checkedIds.join(',');
let sessionId=$.getCookie('sessionId');
let params = {
ids:ids,
sessionid:sessionId
}
let formData = ''
for (let it in params) {
formData += encodeURIComponent(it) + '=' + encodeURIComponent(params[it]) + '&'
}
axios({
method: 'post',
url: url,
data: formData,
responseType: 'arraybuffer',//arraybuffer/blob
}).then(res => {
// let blob = new Blob([res.data], {type: 'application/zip;charset=utf-8'}); //指定格式为application/zip;charset=utf-8
// let downloadElement = document.createElement('a');
// let href = window.URL.createObjectURL(blob); //创建下载的链接
// downloadElement.href = href;
// downloadElement.download = '费用申请.zip'; //下载后文件名
// document.body.appendChild(downloadElement);
// downloadElement.click(); //点击下载
// document.body.removeChild(downloadElement); //下载完成移除元素
// window.URL.revokeObjectURL(href);
//--------------
const blob = new Blob([res.data], {type: 'application/zip;charset=utf-8'});
const fileName = '费用报销.zip'
if ('download' in document.createElement('a')) { // 非IE下载
const elink = document.createElement('a')
elink.download = fileName
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href) // 释放URL 对象
document.body.removeChild(elink)
} else { // IE10+下载
navigator.msSaveBlob(blob, fileName)
}
}).catch((error) => { })
// this.$http({
// method:'post',
// url:url,
// data: formData,
// ContentType:'application/zip;charset=UTF-8',
// responseType:'arraybuffer'
// })
// .then((res)=>{
// let blob = new Blob([res.data],{type:"application/zip"})
// let objectUrl = URL.createObjectURL(blob);
// window.location.href = objectUrl;
// })
补充说明:
contentType稳妥起见要写上去,有可能出现传到后台的不是一个表单形式,而是下面这种(见图)
追加案情:
按照上面的方式,正常情况下应该在浏览器中打印出来的res和res.data是下面这样的(见图),显然一个responseType的属性值是blob,下面是用的arraybuffer,两种都正常
事故点------因为项目需要,重构过程中,整个项目的node版本有重装最新版本,重新构建了项目结构,导致出现以下问题(见图)
对比一下,显然data里面不一样,正常情况下,应该是blob或者是一个arraybuffer,但实际却是一个文件流,由此可见,这个转换二进制流文件失败了,百思不得其解,换回之前的环境后,一切正常。但具体是环境哪里出了问题,后续分析中,欢迎处理过此问题大神留言,不吝赐教,也欢迎翻车的伙伴交流。
axios+post获取并下载后台返回的二进制流的更多相关文章
- IE浏览器下载后台返回的Excel文件,报错400
问题描述(见下图): 问题分析: 400是后端没有接收到请求 原因是后端高版本的tomcat不会自动对字符串进行转义 所以,前端把参数值进行转义,即encodeURI(string) 问题处理前代码( ...
- ajax 请求 后台返回的文件流
download(url) { var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); // 也可以使用POST方式,根据接口 xhr. ...
- 后台返回excel文件流,js下载
/** 下载excel */ downloadExcel(data: Blob): void { var blob = new Blob([data], { type: 'application/vn ...
- js下载后台返回的docx(返回格式:文档流)文件
原文地址: https://www.jianshu.com/p/a81c68c15fbd PS需要指定responseType类型,不然文件内容会乱码哦 咦?文件名乱码?需要手动设置文件名哦↓ 呀,文 ...
- vue2.x 下载后台传过来的流文件(excel)后乱码问题
1.接口返回的流和头部: 2.下载流文件的代码 方法一:是用了插件 https://github.com/kennethjiang/js-file-download 方法二:是用了 blob 不管哪种 ...
- iOS解析后台返回的二进制图片
UIEdgeInsets insets = {0,0,0,0}; [self.showidentifyButton setImageEdgeInsets:insets]; NSData *imageD ...
- vue下载后台传过来的乱码流的解决办法
后台返回的乱码流 解决办法: 请求方式用的是axios,主要加关键的 {responseType: 'blob'} axios封装 export function postDownload(url, ...
- vue 用axios实现调用接口下载excel
了解的方式有两种: 1. 用a标签,href设置为后端提供的excel接口 <a href="excel接口">导出</a> 简单方便,缺点就是当有toke ...
- vue项目 下载表格 java后台返回的是信息流表格如何下载解决乱码
主要是在请求参数后面加上{responseType: 'blob'}或者arrayBuffer this.$http.get(this.api.export, { params: this.info, ...
随机推荐
- python之scrapy爬取jd和qq招聘信息
1.settings.py文件 # -*- coding: utf-8 -*- # Scrapy settings for jd project # # For simplicity, this fi ...
- linux 执行shell脚本的时候,生成的log文件乱码
脚本执行后,生成的log文件,cat打开没有问题,vim打开就是文字乱码. file1完全没有问题,其他人的file2追加到file中间的时候就出现了这个问题. 因为使用notepad在win7写的, ...
- 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_2-1.快速搭建SpringBoot项目,采用Eclipse
笔记 1.快速搭建SpringBoot项目,采用Eclipse 简介:使用SpringBoot start在线生成项目基本框架并导入到eclipse中 1.站点地址:http://start. ...
- Jmeter性能测试工具的使用(Web性能测试)
Jmeter性能测试工具的使用(Web性能测试) 1.下载 http://pan.baidu.com/s/1o7p18Ye 该软件不用安装,直接解压打开即可使用. 2.使用 这里就在win下进行,图形 ...
- Laplacian eigenmap 拉普拉斯特征映射
下面是实验室大牛师兄自己写的一段总结,主要内容是Laplacian Eigenmap中的核心推导过程. 有空还是多点向这位师兄请教,每次都会捡到不少金子. Reference : <Laplac ...
- delphi循环校验数据集
function XXXXXFrom.CheckData(Sender: TObject): Boolean; var tmpcds:TfwClientDataset; begin Result:=F ...
- centos源码安装mysql5.7
http://blog.csdn.net/langzi7758521/article/details/51435985
- 【VS开发】RIbbon编程
多彩界面,Ribbon编程 Ribbon是类似于office2007样式的界面,它替代了传统的MFC程序里的菜单和工具栏,MFC默认生成的Ribbon功能少,需要我们自己添加一些控件和图片等元素使界面 ...
- Autoit安装及启动
1.Autoit下载: 官网下载地址:https://www.autoitscript.com/site/autoit/downloads/ 提供百度网盘下载:https://pan.baidu.co ...
- poj1155 TELE (树上分组背包)
题目链接:https://vjudge.net/problem/POJ-1155 题意:给定一颗以1为根的边权树,有n个结点,其中m个叶子结点,每个叶子结点有一个价值.要求从m个叶子结点中选最多的结点 ...