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

1 使用downloadjs

1.1 下载

npm install downloadjs

import download from 'downloadjs';

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

2 使用a链接跳转方式

• 虽然是打开新窗口的形式，但指向过去后，浏览器会自动解析下载，并自动关闭这个新窗口
• 注： 只支持GET方式的请求 ( 因为GET请求不受同源策略的影响与限制 )
• 如果不理解GET请求为什么不受同源策略的影响与限制 想想原生jsonp是怎么解决跨域的。

2.1 封装a链接公共方法

// url 为接口地址
export const openWindow = (url) => {
    const link = document.createElement('a');
    link.href = `${window.location.origin}xxxxxxxx`;
    link.setAttribute('download', '文件.xlsx'); // 确保文件名包含扩展名
    document.body.appendChild(link);
    link.click();
    link.remove();
}

// 以下是接口举例 // 后面会用到
export function exce(params) {
  return request({
    method: "GET",
    url: "接口地址",
    params,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    }
  });
}

export const excels = "接口地址"

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

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

2.2 使用

import { downloadFile } from "@/utils/index";
import { excels } from "@/api/index";

methods:{
  openWindow(`${excels }`)
}

2.3 问题描述与解决

• 虽然上述方法看起来很方便，但这个接口一旦报错，浏览器就无法解析到数据，这个新窗口也不会自动关闭，会把错误信息展示出来，例如：
  效果图
• 如果觉得接口肯定不会报错或者能接受，那下面的就不用看了，因为我自己都觉得这样写很呆

解决办法，先调用接口，判断接口未报错再调用公共方法