下载接口返回的数据流格式文件

• 如果下载文件的接口返回一个文件流，直接使用a标签的download属性是下载不了的，，因为通常后端返回给我们的数据格式是json，其实除此之外，还有其他的格式如：arraybuffer、blob等，接口返回文件流时，一般采取arraybuffer、blob这两个格式

1.首先定义好请求跟解析文件流

1.1接口请求

// 模板下载
import request from "@/resources/request.js"


export function downloadExcel () {
  return request({
    method: "GET",
    url: "接口请求地址",    
  })
}

1.2定义下载文件流方法

// 下载文件流
export const downloadFile = (res) => {
    const blob = new Blob([res], {
       type:
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
      "application/vnd.ms-excel",
  }) // 此处指定了只适用于 .xlsx xls 文件，可自行调整想要适配的文件或不指定

    // 通过URL.createObjectURL生成文件路径
    const url = window.URL.createObjectURL(blob);

    // 创建a标签
    const ele = document.createElement("a");
    ele.style.display = "none";

    // 设置href属性为文件路径，download属性可以设置文件名称
    ele.href = url;
    // 将a标签添加到页面并模拟点击
    document.querySelectorAll("body")[0].appendChild(ele);
    ele.click();

    // 移除a标签
    ele.remove();
}

• 此时文件确实下载成功了，但你会发现文件里的内容没有，只是下载了个空的文件回来，此时需要指定下指定响应的数据类型，防止出现解析错误

1.3修改接口请求(指定响应数据类型)

import request from "@/resources/request.js"

// 模板下载
export function downloadExcel () {
  return request({
    method: "GET",
    url: "接口请求地址",
    responseType: "blob",
    // responseType: "arraybuffer"
  })
}

• 如果想Blob文件对象转化为其他格式的数据，可借助FileReader对象的API进行操作

FileReader.readAsText(Blob) // 将Blob转化为文本字符串;
FileReader.readAsArrayBuffer(Blob)： // 将Blob转为ArrayBuffer格式数据
FileReader.readAsDataURL() // 将Blob转化为Base64格式的Data URL