前端导出功能实现的两种方式
1.点击链接
数据、文件格式全部在后台封装好,返回给前端一个链接,前端通过点击链接自动下载,两种方式:
1 (1)window.location.href = ‘url’ 2 (2)<a href='url' download=''></a>
2.解析后台返回的文件流
这种方式就是后台将要导出的文件以文件流的方式返回给前端,前端通过blob去解析,再动态创建a标签。
1 // 发请求 2 this.axios.post(url, {param: paramName}, {responseType: 'arraybuffer'}).then(res => { 3 let content = res.data; // 文件流 4 let blob = new Blob([content],{type: 'application/octet-stream'}); 5 let fileName = 'filename.xls'; 6 // 如果后端返回文件名 7 // let contentDisposition = res.headers['content-disposition']; 8 // let fileName = decodeURI(contentDisposition.split('=')[1]); 9 if ('download' in document.createElement('a')) { // 非IE下载 10 let link = document.createElement('a'); 11 link.download = fileName; 12 link.style.display = 'none'; 13 link.href = URL.createObjectURL(blob); 14 document.body.appendChild(link); 15 link.click(); 16 URL.revokeObjectURL(link.href) ; // 释放URL 对象 17 document.body.removeChild(link); 18 } else { // IE10+下载 19 navigator.msSaveBlob(blob,fileName); 20 } 21 })
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!