web端下载文件,后端已文件流返回,如何实现?
1、先转换成blob
2、创建 a 标签
3、通过 URL 的 createObjectURL 方法创建下载链接
4、把 a 标签增加到当前页
5、调用 click 方法
6、删除 a 节点
7、销毁url对象
上代码 ( 其中 有用到 antd Message 组件)
1 import { Message } from "ant-design-vue"; 2 export function exportFile(data, fileName, dialogName) { 3 let blob = new Blob([data], { 4 type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" //application/vnd.ms-excel 5 }); 6 if (blob.size > 0) { 7 let objectUrl = URL.createObjectURL(blob); //创建url对象 8 let link = document.createElement("a"); 9 link.style.display = "none"; 10 link.href = objectUrl; 11 link.download = fileName + ".xlsx"; //下载后文件名 12 document.body.appendChild(link); 13 link.click(); 14 document.body.removeChild(link); 15 URL.revokeObjectURL(link.href); //销毁url对象 16 } 17 Message.success({ 18 content: "导出成功!", 19 key: dialogName || "exportStatistics", 20 duration: 2 21 }); 22 }
作者:胡倩倩0903
本文版权归作者和博客园共有,欢迎转载,但必须给出原文链接,并保留此段声明,否则保留追究法律责任的权利。
posted on 2021-01-14 11:32 kitty20180903suzhou 阅读(291) 评论(0) 编辑 收藏 举报