最近在做ant-design-vue框架的后台项目，需要用了一下的下载导入功能

fetch下载文档流

1.接收的数据需要先进行response.json()

如下:
fetch(url,xxx).then(response=>{return response.json()}).then(res=>{console.log(res);})
这是最常用的fetch的用法，res就是接口返回的数据了。

如果是文档流，则需要将response.json()改为response.blob()，也就是如下：
fetch(url,xxx).then(response=>{return response.blob()}).then(res=>{console.log(res)})

2.通过response.blob()转化后可以拿到文档流

3.下载文档流可以通过创建a标签的形式来处理

const link = document.createElement("a");
let blob = new Blob([res], {
 type:
   ".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel",
});
link.href = URL.createObjectURL(blob);
link.download = `order.xlsx`;
link.click();

fetch实现下载文档流——代码

var param = this.filterParams(params);
var baseUrl = process.env.VUE_APP_API_BASE_URL_API;
var myHeaders = new Headers();
var Authorization = Cookie.get("Authorization");
myHeaders.append("Authorization", Authorization);
var requestOptions = {
 method: "get",
 headers: myHeaders,
 redirect: "follow",
};
fetch(`${baseUrl}/api/sheet-metal/orders/export?${param}`, requestOptions)
 .then((response) => {
   return response.blob();
 })
 .then((res) => {
const link = document.createElement("a");
let blob = new Blob([res], {
 type:
   ".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'",
});
link.href = URL.createObjectURL(blob);
link.download = `order.xlsx`;
link.click();
 })
 .catch((error) => console.log("error", error));

axios实现下载文档流

1.要在配置文件中添加responseType:'blob'，不是放在headers里面，是配置文件的第一层，其他的跟fetch的一样

let params = {
  ...this.queryParam,
  ...this.pagination,
};
//接口地址为exportOrder
exportOrder(params, { responseType: "blob" }).then((res) => {
 const link = document.createElement("a");
 let blob = new Blob([res], {
   type:
     ".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'",
 });
 link.href = URL.createObjectURL(blob);
 link.download = `order.xlsx`;
 link.click();
});

fetch实现导入xlsx文件

1.我这边的接口需要配置用户信息，因此用到了authorization和cookie的信息，需要配置的关键是redirect:'follow'

2.new FormData后传入的StreamContent是需要跟后端保持一致的，并不是随便的一个名称

import Cookie from "js-cookie";
...
var baseUrl = process.env.VUE_APP_API_BASE_URL_API;
var myHeaders = new Headers();
var Authorization = Cookie.get("Authorization");
myHeaders.append("Authorization", Authorization);
var formdata = new FormData();
formdata.append("StreamContent", new Blob([files]));
var requestOptions = {
  method: "post",
  headers: myHeaders,
  body: formdata,
  redirect: "follow",
};
fetch(
  `${baseUrl}/api/sheet-metal/orders/${this.detailObj.orderNo}/import?BomType=${this.fileType}`,
  requestOptions
)
  .then((response) => {
	//其他操作
  })
  .catch((error) => console.log("error", error));

axios导入xlsx文件

1、需要配置headers的两个参数才可以，一定要注意，否则文件导入会失败

var formdata = new FormData();
formdata.append("StreamContent", new Blob([files]));
importFile(this.detailObj.orderNo, this.fileType, formdata, {
 Headers: {
   "Content-Type": "multipart/form-data",
   withCredentials: true,
 },
}).then((res) => {
 //其他操作
});

下载vue项目中的static静态文件

1.这个方法也是下载文档流的方式，不过要注意路径，直接使用static/xxx的路径即可。

let a = document.createElement("a");
if (type == 0) {
  a.href = `static/lingjian.xlsx`;
  a.download = "零件工艺表模板";
} else {
  a.href = `static/peijian.xlsx`;
  a.download = "配件工艺表模板";
}
a.target = "_blank";
a.click();
a.remove();

完成！！！

fetch的详细介绍

fetch详细介绍：https://www.cnblogs.com/cmyoung/p/8573244.html