开始本来是基于表格组件 调用组件方法默认导出,但是这种方式只支持 get 请求方式,需求想利用post方式传参,过滤导出条件。参照了好多资料
整理出一套 基于前后端的文件下载,接口传参,如下图:
接口响应返回值是字节流(完全不知道该如何处理,硬着头皮百度照着方法去解析返回来的响应值):
发现下载的文件损坏,打不开:
起初一直以为是在代码中字节流转换的时候有问题,一直修改代码 是type类型不对
let blob = new Blob([res], {
type:
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8',
})
if (window.navigator.msSaveOrOpenBlob) {
//兼容 IE & EDGE
navigator.msSaveBlob(
blob,
'发票邮寄-' + moment().format('YYYYMMDD') + '.xlsx',
)
} else {
var link = document.createElement('a')
// 兼容不同浏览器的URL对象
const url = window.URL || window.webkitURL || window.moxURL
// 创建下载链接
link.href = url.createObjectURL(blob)
//命名下载名称
link.download = '发票邮寄-' + moment().format('YYYYMMDD') + '.xlsx'
//点击触发下载
link.click()
//下载完成进行释放
url.revokeObjectURL(link.href)
参考了资料才发现是没有设置responseType,
Axios官方文档是这样描述的:responseType 表示服务器响应的数据类型,可以是 'arraybuffer' , 'blob' , 'document' , 'json', 'text', 'stream'
responseType: 'json', // 默认的
最后在封装的axios 请求中加入
亲测arraybuffer,blob都可生效。。。只能用于文件,图片,音频,视频等传输,正常json作为返回值,会报错。