前端导出功能实现的两种方式

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 })
复制代码

 

posted @   鼓舞飞扬  阅读(810)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!
点击右上角即可分享
微信分享提示