前端a链接读取txt文件导出下载_前端导出功能实现的两种方式
发布日期:2021-08-19 23:51:57 浏览次数:2 分类:技术文章

本文共 1053 字,大约阅读时间需要 3 分钟。

1.点击链接

数据、文件格式全部在后台封装好,返回给前端一个链接,前端通过点击链接自动下载,两种方式:

1 (1)window.location.href = ‘url’2 (2)

2.解析后台返回的文件流

这种方式就是后台将要导出的文件以文件流的方式返回给前端,前端通过blob去解析,再动态创建a标签。

99aadf3eac5d3e24ecad39d11ecbe14d.gif
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 })

转载地址:https://blog.csdn.net/weixin_31414801/article/details/112207322 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:chemdraw怎么连接两个结构_科研小站 | 化学结构绘图必备软件——ChemDraw了解一下...
下一篇:mt6765和骁龙665哪个好_高通命名骁龙888,明摆为中国造,雷军问小米下一代叫什么名?...

发表评论

最新留言

做的很好,不错不错
[***.243.131.199]2024年04月22日 02时58分39秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章