前端进行下载文件

前端请求下载文件

GET

针对GET请求下载文件，直接可以采用这种方式下载

window.location.href =url

POST

准备好参数，即可直接生成

//导出Excel
/**
* XMLHttpRequest请求
* @param params 请求参数
*/
request(params: any, url: any) {
// 创建XMLHttpRequest对象
const req = new XMLHttpRequest();
// 初始化
req.open('POST', url);
// 设置响应类型为blob
// req.responseType = 'blob';
// 设置请求头
req.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
req.setRequestHeader('Access-Control-Allow-Credentials', 'true');
req.setRequestHeader('Access-Control-Allow-Origin', 'true');
// 请求成功回调事件
req.onload = () => {
// 获取响应数据
const data = req.response;
// 创建blob对象并将响应数据添加进去
const blob = new Blob([data], { type: 'application/vnd.ms-excel' });
// 将blob对象转成Url
const blobUrl = window.URL.createObjectURL(blob);
// 定义下载文件名称
const download = 'a.xls';
// 调用下载方法
this.download(download, blobUrl)
}
// 请求出现错误回调事件
req.onerror = () => {
console.log('导出失败');
}
// 发送请求
req.send(JSON.stringify(params));
}
/**
* 下载方法
* @param download 下载名称
* @param blobUrl 下载地址
*/
download(download, blobUrl) {
// 创建a标签
const a = document.createElement('a')
// 将a添加到页面中
document.body.appendChild(a);
// 将a标签的样式设置为隐藏
a.style.display = 'none';
// 设置a标签的下载名称
a.download = download;
// 设置a标签的下载地址
a.href = blobUrl;
// 触发a标签的点击事件
a.click();
// 将a标签从页面中移除
document.body.removeChild(a);
}

最后

以上就是喜悦可乐为你收集整理的前端执行下载文件GET POST前端进行下载文件GETPOST的全部内容，希望文章能够帮你解决前端执行下载文件GET POST前端进行下载文件GETPOST所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。