卖彩票的网站怎么做的,苏州网站建设与网络营销,做购物网站之前做些什么,齐河做网站前端实现获取后端返回的文件流并下载 方法一#xff1a;使用Axios实现文件流下载优点缺点 方法二#xff1a;使用封装的Request工具实现文件流下载优点缺点 方法三#xff1a;直接通过URL跳转下载优点缺点 结论 在前端开发中#xff0c;有时需要从后端获取文件流#xff0… 前端实现获取后端返回的文件流并下载 方法一使用Axios实现文件流下载优点缺点 方法二使用封装的Request工具实现文件流下载优点缺点 方法三直接通过URL跳转下载优点缺点 结论 在前端开发中有时需要从后端获取文件流并将其下载到本地。本文介绍如何在前端实现此功能的不同的实现方法并分析其优缺点
方法一使用Axios实现文件流下载
使用Axios实现文件流下载的方法本人亲测可以实现
import axios from axios;
import { getToken } from /utils/authhandleExport() {// 接口调用获取文件axios({method: get,responseType: blob, // 指定响应类型为bloburl: this.GLOBAL.baseURL /api/v1/business/user/export,data: this.queryParams, // 导入文件一般都用FormData格式数据headers: { Authorization: Bearer getToken() } // 传递token进行身份验证}).then(res {if (res.code 200) {// 导入成功this.downloadBinaryFile(res.data, 导入失败后下载的报错文件)} else {// 输出失败信息}}).catch(error {console.error(下载失败, error);});
},/*** 将二进制文件下载到本地保存为excel文件* param {*} binFile 二进制文件流* param {*} fileName 下载后的文件名* param {*} blobType 文件格式默认为 application/vnd.ms-excel*/
downloadBinaryFile(binFile, fileName, blobType application/vnd.ms-excel) {// 创建 Blob 对象包含二进制文件流和文件类型const blobObj new Blob([binFile], { type: blobType });// 创建下载链接元素const downloadLink document.createElement(a);// 处理不同浏览器的 URL 兼容性let url window.URL || window.webkitURL; url url.createObjectURL(blobObj); // 创建文件 URL// 设置下载链接属性downloadLink.href url;downloadLink.download fileName;// 将下载链接添加到文档中并触发点击事件document.body.appendChild(downloadLink);downloadLink.click();// 移除下载链接并释放 URL 对象document.body.removeChild(downloadLink);window.URL.revokeObjectURL(url);
}实现的效果 优点
支持传递Token进行身份验证安全性较高支持POST请求可以将参数放在请求体中避免URL长度限制及参数暴露
缺点
实现相对复杂需要手动创建和管理Blob对象及下载链接
方法二使用封装的Request工具实现文件流下载
接下来介绍使用封装的Request工具实现文件流下载的方法
import request from /utils/request// 日志管理收藏、浏览、下载导出接口
export function exportUserOperateAdmin(data, headers) {return request({url: /business/user/export,method: get,data: data,headers: headers})
}// 调用导出接口
exportUserOperateAdmin(this.queryParams, { responseType: blob }).then(response {console.log(response)const url window.URL.createObjectURL(new Blob([response.data])) // 创建下载链接const link document.createElement(a)link.href urllink.download 全文导入模板.xlsx // 设置文件名document.body.appendChild(link)link.click() // 触发下载document.body.removeChild(link) // 下载后移除元素}
).catch(error {console.error(下载失败, error)this.loading false // 停止加载隐藏加载状态
})优点
封装后的Request工具调用简单代码更简洁支持传递Token进行身份验证安全性较高
缺点
实现相对简单但仍需手动处理Blob对象及下载链接
方法三直接通过URL跳转下载
最后介绍直接通过URL跳转实现文件下载的方法
const baseurl this.GLOBAL.baseURL
// 拼接上导出的地址如果接口还需要其他参数都可以直接拼接上
let url baseurl /api/v1/business/user/export;
console.log(url)
alert(url)
// 第二个参数_self表示在当前页下载不打开新的页面
window.open(url, _self)优点
实现简单不需要处理Blob对象及下载链接适合下载无需身份验证或参数简单的文件
缺点
无法传递Token进行身份验证安全性较低参数放在URL中不安全且可能会导致URL过长处理中文参数可能会出现乱码问题
结论
以上三种方法各有优缺点实际开发中可以根据具体需求选择合适的方法。
如果需要传递Token进行身份验证并确保下载安全性推荐使用方法一或方法二
如果只是简单下载无需验证的文件可以考虑使用方法三
