前端执行下载文件GET POST

mac2024-04-19  4

前端进行下载文件

前端请求下载文件

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); }
最新回复(0)