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

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);
   // 获取文件名称
   var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
   let contentDisposition = decodeURI(res.headers['content-disposition'])
   let result = patt.exec(contentDisposition)
   let fileName = result[1]
  fileName = fileName.replace(/\"/g, '')
    // 创建a标签
    const ele = document.createElement("a");
    // 设置href属性为文件路径，download属性可以设置文件名称
   ele.setAttribute('download', fileName)
    ele.download = '文件'// 下载文件的文件名
    // 设置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
2  使用a链接跳转方式
虽然是打开新窗口的形式，但指向过去后，浏览器会自动解析下载，并自动关闭这个新窗口
注： 只支持GET方式的请求 ( 因为GET请求不受同源策略的影响与限制 )
如果不理解GET请求为什么不受同源策略的影响与限制 想想原生jsonp是怎么解决跨域的，要是还不理解，建议买本《JavaScript高级程序设计》
2.1 封装a链接公共方法
// url 为接口地址
export const openWindow = (url) => {
    const aTag = document.createElement('a')
    // 直接将a链接指向完整的接口请求地址，
    aTag.href = `${'接口请求地址'}${url}`
    aTag.target = '_blank'
    aTag.click()
// 以下是接口举例 // 后面会用到
export function exce(params) {
  return request({
    method: "GET",
    url: "接口地址",
    params,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
export const excels = "接口地址"
2.2 使用
import { downloadFile } from "@/utils/index";
import { excels } from "@/api/index";
methods:{
  openWindow(`${excels }`)
2.3 问题描述与解决
虽然上述方法看起来很方便，但这个接口一旦报错，浏览器就无法解析到数据，这个新窗口也不会自动关闭，会把错误信息展示出来，例如：