前端 导出二进制流文件

前端 导出excel文件

日常项目 会经常碰到 导出pdf excel world 文件，正常来说后端都会返回一个下载链接、前端只需要放到点击事件打开即可，但是有的时候 也会返回一个二进制流文件、看起来像是乱码、这个时候 就需要前端转成文件并下载了。

下载二进制文件、我们需要先把数据转换成一个Blob对象、Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

使用axios 获取数据以后、拿到返回成功的data数据、然后我们就把data数据转换成Blob对象并创建一个下载链接

 // 构造一个blob对象来处理数据，并设置文件类型、type为导出的文件类型 以excel为demo
const blob = new Blob([data], { type: 'application/vnd.ms-excel' })
const href = URL.createObjectURL(blob) // 创建新的URL表示指定的blob对象
const a = document.createElement('a') // 创建a标签
a.style.display = 'none'
a.href = href // 指定下载链接
//设置指定元素上的某个属性值。如果属性已经存在，则更新该值
a.setAttribute('download', '文件名字.xlsx') 
a.click() // 触发下载
URL.revokeObjectURL(a.href) // 释放URL对象

经过上面的代码、我们已经可以成功把二进制流文件 转换为自己需要的文件格式了