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获取并下载后台返回的二进制流的更多相关文章

  1. IE浏览器下载后台返回的Excel文件,报错400

    问题描述(见下图): 问题分析: 400是后端没有接收到请求 原因是后端高版本的tomcat不会自动对字符串进行转义 所以,前端把参数值进行转义,即encodeURI(string) 问题处理前代码( ...

  2. ajax 请求 后台返回的文件流

    download(url) { var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); // 也可以使用POST方式,根据接口 xhr. ...

  3. 后台返回excel文件流,js下载

    /** 下载excel */ downloadExcel(data: Blob): void { var blob = new Blob([data], { type: 'application/vn ...

  4. js下载后台返回的docx(返回格式:文档流)文件

    原文地址: https://www.jianshu.com/p/a81c68c15fbd PS需要指定responseType类型,不然文件内容会乱码哦 咦?文件名乱码?需要手动设置文件名哦↓ 呀,文 ...

  5. vue2.x 下载后台传过来的流文件(excel)后乱码问题

    1.接口返回的流和头部: 2.下载流文件的代码 方法一:是用了插件 https://github.com/kennethjiang/js-file-download 方法二:是用了 blob 不管哪种 ...

  6. iOS解析后台返回的二进制图片

    UIEdgeInsets insets = {0,0,0,0}; [self.showidentifyButton setImageEdgeInsets:insets]; NSData *imageD ...

  7. vue下载后台传过来的乱码流的解决办法

    后台返回的乱码流 解决办法: 请求方式用的是axios,主要加关键的 {responseType: 'blob'} axios封装 export function postDownload(url, ...

  8. vue 用axios实现调用接口下载excel

    了解的方式有两种: 1. 用a标签,href设置为后端提供的excel接口 <a href="excel接口">导出</a> 简单方便,缺点就是当有toke ...

  9. vue项目 下载表格 java后台返回的是信息流表格如何下载解决乱码

    主要是在请求参数后面加上{responseType: 'blob'}或者arrayBuffer this.$http.get(this.api.export, { params: this.info, ...

随机推荐

  1. SDTP协议

    转载于 http://blog.csdn.net/fan_hai_ping/article/details/11797449 SDTP协议细则

  2. C# WinForm设置窗口无边框、窗口可移动、窗口显示在屏幕中央、控件去边框

    1)窗口去除边框 在组件属性中FormBorderStyle设为None 2)窗口随着鼠标移动而动 添加引用using System.Runtime.InteropServices; 在初始化控件{I ...

  3. html分割线

    分割线效果图 完整html代码如下 <!DOCTYPE html> <html> <head> <meta charset= "utf-8" ...

  4. Apple全系列缓冲区溢出内核RCE(CVE-2018-4407)poc

    # CVE-2018-4407 ICMP DOS # https://lgtm.com/blog/apple_xnu_icmp_error_CVE-2018-4407 # from https://t ...

  5. Spark在Windows上调试

    1. 背景 (1) spark的一般开发与运行流程是在本地Idea或Eclipse中写好对应的spark代码,然后打包部署至驱动节点,然后运行spark-submit.然而,当运行时异常,如空指针或数 ...

  6. C# WindowService 动态修改服务名

    serviceInstaller1中可以设置服务名,描述等 在实际情况中,我们可能需要将Service多开来达到我们的目的,但是安装两次以上会有错误提示,因为服务名已经重复了,这个时候,我们需要动态改 ...

  7. 《精通并发与Netty》学习笔记(02 - 服务端程序编写)

    上节我们介绍了开发netty项目所必需的开发环境及工具的使用,这节我们来写第一个netty项目 开发步骤 第一步:打开https://search.maven.org 找到netty依赖库 第二步:打 ...

  8. FUZZ测试简介

    基本思想:利用黑盒方法,发送大量恶意/随机数据到被测试系统,通过监视系统运行过程中的异常,来发现应用程序中可能存在的安全问题.

  9. SpringBoot消息队列之-rabbitMQ

    一.概述 1.在大多应用中,我们系统之间需要进行异步通信,即异步消息. 2.异步消息中两个重要概念:消息代理(message broker)和目的地(destination) 当消息发送者发送消息以后 ...

  10. JS、JQUERY 获取浏览器和屏幕各种高度宽度

    好长时间没有更新博客了... 把我最近积累的一点知识点放上博客,以后以备不需之要,也给大家整理一下.. Javascript: IE中:document.body.clientWidth ==> ...