中后端做Excel导出功能返回数据流前端如何做处理
exportFile(params).then(res => { // 直接返回来就是blob数据 if (res) { const xlsx = 'application/vnd.ms-excel' const blob = new Blob([res], { type: xlsx }) const a = document.createElement('a') // 转换完成,创建一个a标签用于下载 a.download = 'fileName.xls' a.href = window.URL.createObjectURL(blob) a.click() a.remove() } else { this.$message.error('导出失败') }
exportFile调用的是后端接口,直接将返回的文件数据转成Blob。注意:这里需要指明下载的文件类型,excel对应的是:'application/vnd.ms-excel'。
a.download = 'fileName.xls' 指定下载文件的名称,包含后缀名,如果后端的excel是xls格式,那前端也必须是xsl格式,否则下载后打开文件会报错。如果是xslx格式则修改为对应的xlsx格式,必须对应。
打开或者预览全是乱码的解决办法:
1. 后端接口返回的blob文件流,你下载下来的文件是乱码的?
解决办法 :让你的后端设置流的编码为utf-8。请跟后端大佬说,一定要给blob格式的文件流。
2. 后端返回的blob文件流,并且已经设置了utf-8,但是你接受的接口返回值,依然是乱码?
解决办法: 肯定没有设置 responseType: “arraybuffer”。