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

使用插件 downloadjs

• 下载插件

npm install downloadjs

• 引用

import download from 'downloadjs';
download(data, filename, mimeType);
// data 是要下载的文件内容，可以是 Blob、Buffer、ArrayBuffer、URL、字符串等；
// filename 是要保存的文件名；
// mimeType 是文件的 MIME 类型，可选。-- 如果不写则自动识别

使用a链接跳转方式

虽然是打开新窗口的形式，但指向过去后，浏览器会自动解析下载，并自动关闭这个新窗口
注： 只支持GET方式的请求 (因为GET请求不受同源策略的影响与限制 )

• 封装公共方法

// url 为接口地址
export const openWindow = (url) => {
    const aTag = document.createElement('a')
    // 直接将a链接指向完整的接口请求地址，
    aTag.href = `${'接口请求地址'}${url}`
    aTag.setAttribute('download', '自定义的文件名')
    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 = "接口地址"

• 项目中使用

import { downloadFile } from "@/utils/index";
import { excels } from "@/api/index";
methods:{
  openWindow(`${excels }`)
}

解析文件流方式下载文件

• 定义接口请求

// 模板下载
import request from "@/resources/request.js"
export function downloadExcel () {
  return request({
    method: "GET",
    url: "接口请求地址", 
    responseType: "blob"   //指定响应数据类型
  })
}

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

readAsText(Blob, encoding): 将Blob对象转换为文本数据。可以指定可选的编码方式。
readAsDataURL(Blob): 将Blob对象转换为DataURL格式的字符串，可以用于显示图片或创建下载链接。
readAsArrayBuffer(Blob): 将Blob对象转换为ArrayBuffer格式的数据，适用于处理二进制数据。
readAsBinaryString(Blob): 将Blob对象转换为二进制字符串。

• 定义下载文件流

// 下载文件流
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();
}