当前位置: 首页 > backend >正文

vue中后端返回数据流,前端实现导出下载

适用于需要验证请求头或者除了get的其他请求,如果单纯不需要验证请求头的get请求可以直接使用a标签下载
js接口请求

export function riskDownload(params) {return request({url: '接口路径',method: 'get',responseType: 'blob',selfAreaCode: true,params})
}

处理请求回来的数据流实现下载

let params={...}
riskDownload(params).then((res) => {let name = this.tabs.filter(item => item.value == this.active)[0].labelvar blob = new Blob([res], { type: res.type }) // application/vnd.openxmlformats-officedocument.wordprocessingml.document这里表示doc类型var href = window.URL.createObjectURL(blob) // 创建下载的链接if (window.navigator.msSaveBlob) {try {window.navigator.msSaveBlob(blob, name)} catch (e) {console.log(e)}} else {// 谷歌浏览器 创建a标签 添加download属性下载var downloadElement = document.createElement('a')downloadElement.href = hrefdownloadElement.target = '_blank'downloadElement.download = name // 下载后文件名document.body.appendChild(downloadElement)downloadElement.click() // 点击下载document.body.removeChild(downloadElement) // 下载完成移除元素window.URL.revokeObjectURL(href) // 释放掉blob对象}})},
http://www.xdnf.cn/news/15563.html

相关文章:

  • Flutter基础(前端教程①①-底部导航栏)
  • 【动归解题套路框架】【带备忘录的递归】【最优子结构】【自下而上DP table】
  • FunASR Paraformer-zh:高效中文端到端语音识别方案全解
  • Linux运维新手的修炼手扎之第19天
  • 【从零开始学习大模型】什么是MCP协议
  • PostGres超过最大连接数报错
  • 多级缓存架构与热点探测系统核心技术解析
  • AI时代基础入门
  • 测试学习之——Pytest Day2
  • 深入理解 Kafka 核心:主题、分区与副本的协同机制
  • Scalefusion 与 EasyControl 对比:轻量级方案与全功能 IoT MDM 的深度碰撞
  • spring容器的bean是单例还是多例的?线程安全吗?
  • AI编程神器 Claude Code 安装及使用体验
  • SQLSERVER清理日志
  • 【28】MFC入门到精通——MFC串口 Combobox 控件实现串口号
  • Python面向对象编程(OOP)详解:通俗易懂的全面指南
  • HTTP vs HTTPS
  • Linux驱动基础:阻塞、休眠、poll、异步通知
  • 探究Netty 4.2.x版本
  • 增程式汽车底盘设计cad【9张】三维图+设计说明书
  • 单列集合顶层接口Collection
  • 医疗AI“全栈原生态“系统设计路径分析
  • 【游戏引擎之路】登神长阶(十八):3天制作Galgame引擎《Galplayer》——无敌之道心
  • 用AI做带货视频评论分析进阶提分【Datawhale AI 夏令营】
  • LLM大语言模型不适合统计算数,可以让大模型根据数据自己建表、插入数据、编写查询sql统计
  • 加速度传感器的用途与应用
  • es启动问题解决
  • 【C#】实体类定义的是long和值识别到的是Int64,实体类反射容易出现Object does not match target type
  • 高性能架构模式——高性能NoSQL
  • 【MySQL基础】MySQL事务详解:原理、特性与实战应用