js 实现文件下载——文档流形式和本地文件下载
- `fetch`下载文档流
- 1.接收的数据需要先进行`response.json()`
- 2.通过`response.blob()`转化后可以拿到文档流
- 3.下载文档流可以通过创建`a`标签的形式来处理
- `fetch`实现下载文档流——代码
- `axios`实现下载文档流
- 1.要在配置文件中添加`responseType:'blob'`,不是放在`headers`里面,是配置文件的第一层,其他的跟`fetch`的一样
- `fetch`实现导入`xlsx`文件
- 1.我这边的接口需要配置用户信息,因此用到了`authorization`和`cookie`的信息,需要配置的关键是`redirect:'follow'`
- 2.`new FormData`后传入的`StreamContent`是需要跟后端保持一致的,并不是随便的一个名称
- `axios`导入`xlsx`文件
- 1、需要配置`headers`的两个参数才可以,一定要注意,否则文件导入会失败
- 下载`vue`项目中的`static`静态文件
- 1.这个方法也是下载文档流的方式,不过要注意路径,直接使用`static/xxx`的路径即可。
- `fetch`的详细介绍
最近在做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
的详细介绍