前端执行将后端返回的二进制流下载到 excel 中

“我正在参加「掘金·启航计划」”

记录:岗位技能矩阵模块开发中遇到的一些问题，每天都在写BUG,写完BUG写补丁......

实现

之前一直用的都是调用接口,直接就会下载,今天遇到一个后端会返回数据,然后前端还需要进行操作！后端返回一堆二进制数据:

具体实现代码如下 :

// 导出的方法
async export() {
  try {
    // 数据量比较大整个加载动画
    const loadingInstance = Loading.service({ text: '数据量较大,请稍等!' })
    const res = await 接口... // 调用接口获取数据
    const link = document.createElement('a')
    const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
    link.style.display = 'none'
    link.href = URL.createObjectURL(blob)
    // download="filename" 属性规定被下载的超链接目标。filename规定作为文件名来使用的文本。
    link.download = fileName // 下载的文件名
    // link(a)是一个dom元素（一个标签）,向body中插入了一个dom(a)元素。
    document.body.appendChild(link)
    // 创建一个a链接 使用a.click()模拟点击
    link.click()
    document.body.removeChild(link)
    loadingInstance.close()
  } catch {
    错误处理！
  }
},

# 定义文件名
const fileName = `${Date.now()}.xlsx`  后面必须加.xlsx，否则文件导出打开会提示文损坏之类错误....
# Blob构造函数
blob(size,type) Blob构造函数，接受两个参数。第一个参数是一个包含实际数据的数组，第二个参数是数据的类型
# 样式
如果设置 display:none,将隐藏整个元素,如果您设置 visibility:hidden,元素的内容将不可见，但元素保持原来的位置和大小。
#URL.createObjectURL()
URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。该URL可用于指定源 object(blob)的内容。
# removeChild()
removeChild() 方法指定元素的某个指定的子节点。以Node对象返回被删除的节点，如果节点不存在则返回 null。

注意

出现如下错误是因为没有设置响应类型导致的!

// 导出接口
export function <name>(params) {
  return request({
    url: `......`,
    method: 'get',
    responseType: 'blob', // 避免数据损坏并确保文件可以按预期使用。
    params
  })
}

在接口中必须要写responseType: 'blob',如果没有指定可能会导致下载损坏的文件。这是因为在默认情况下，HTTP响应将被解释为文本，这不适合下载二进制文件格式，如图像或文档。 当响应作为文本处理时，文件中包含的任何二进制数据都将被翻译成文本字符，而打开该文件的应用程序可能无法识别这些字符。这可能导致文件损坏，无法打开或正确使用。

小结

如此就实现了一下后端返回二进制数据,前端进行导出(下载)的功能！