前端 下载后端返回的二进制excel数据

目录

需求描述:

解决方案:


需求描述:

后端返回excel的二进制数据,前端收到二进制数据后,让浏览器下载对应excel文件。

解决方案:

这里的res就是指二进制数据

javascript 复制代码
        const link: any = document.createElement('a');
        const blob: Blob = new Blob([res], {
          type: 'application/vnd.ms-excel',
        });
        link.style.display = 'none';
        link.href = URL.createObjectURL(blob);
        // download="filename" 属性规定被下载的超链接目标。filename规定作为文件名来使用的文本。
        const date: Date = new Date();
        link.download = `file-export-${date.getFullYear()}-${date.getMonth()}-${date.getDay()}.xlsx`; // 下载的文件名
        // link(a)是一个dom元素(一个标签),向body中插入了一个dom(a)元素。
        document.body.appendChild(link);
        // 创建一个a链接 使用a.click()模拟点击
        link.click();
        document.body.removeChild(link);

调用以上逻辑即可将二进制数据转为文件,在浏览器中下载。

相关推荐
少云清1 天前
【软件测试】5_基础知识 _CSS
前端·css·tensorflow
倔强青铜三1 天前
AI编程革命:React + shadcn/ui 将终结前端框架之战
前端·人工智能·ai编程
二川bro1 天前
第57节:Three.js企业级应用架构
开发语言·javascript·架构
天外飞雨道沧桑1 天前
前端开发 Cursor MCP 提效工具配置
前端·vscode·ai编程·开发工具·cursor
朱哈哈O_o1 天前
前端通用包的作用——jquery篇
前端
葡萄城技术团队1 天前
纯前端驱动:在线 Excel 工具的技术革新与实践方案
前端·excel
芳草萋萋鹦鹉洲哦1 天前
【vue】调用同页面其他组件方法几种新思路
前端·javascript·vue.js
巴啦啦臭魔仙1 天前
uniapp scroll-view自定义下拉刷新的坑
前端·javascript·uni-app
小满zs1 天前
Next.js第九章(AI)
前端
晨枫阳1 天前
不同语言的元组对比
java·前端·javascript