杂记(01) - 后台返回二进制流缓存至本地(blob,arrayBuffer)

需求

通过接口下载二进制流，将文件下载至本地

解决方案

一、传统网页中，生成Blob路径，通过模拟点击事件，下载至本地

我使用的是axios，在参数中设置responseType: 'blob'，接口直接返回Blob数据

前端在接收后直接通过以下代码下载

const objectUrl = URL.createObjectURL(blob) // blob为接口返回数据 
const link = document.createElement('a') 
link.download = val.name 
link.href = objectUrl link.click() 
URL.revokeObjectURL(link.href)
document?.removeChild(link)

2、通过接口生成arrayBuffer，通过writeFileSync缓存至本地(electron项目Node环境中)

在参数中设置responseType: 'arraybuffer'，接口直接返回arrayBuffer如下图

获取数据后通过下面的方法转成buffer，在使用writeFileSync写入至本地

const path = app.getPath('desktop')
const defaultPath = join(path, '1.txt')
const buffer = Buffer.from(arrayBuffer) // arrayBuffer 接口返回数据 
writeFileSync(path, buffer) // path 为下载路径

如果responseType: 'blob'，Blob的方法可以直接转为arrayBuffer

const path = app.getPath('desktop')
const defaultPath = join(path, '1.txt')
const data = await blob.arrayBuffer() // 返回的是一个promise 
const buffer = Buffer.from(data) 
writeFileSync(defaultPath, buffer)