前端 下载后端返回的二进制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);

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

相关推荐
147API9 分钟前
改名后的24小时:npm 包抢注如何劫持开源项目供应链
前端·npm·node.js
ziqi52211 分钟前
第二十二天笔记
前端·chrome·笔记
鹤归时起雾.11 分钟前
react一阶段学习
前端·学习·react.js
乐~~~14 分钟前
评估等级页面
javascript·vue.js
微祎_14 分钟前
Flutter for OpenHarmony:构建一个专业级 Flutter 番茄钟,深入解析状态机、定时器管理与专注力工具设计
开发语言·javascript·flutter
2301_7806698617 分钟前
HTML-CSS-常见标签和样式(标题的排版、标题的样式、选择器、正文的排版、正文的样式、整体布局、盒子模型)
前端·css·html·javaweb
薯片锅巴19 分钟前
锅巴的JavaScript进阶修炼日记2:面向对象编程/原型及原型链
开发语言·javascript·ecmascript
mseaspring25 分钟前
一款高颜值SSH终端工具!基于Electron+Vue3开发,开源免费还好用
运维·前端·javascript·electron·ssh
appearappear35 分钟前
wkhtmltopdf把 html 原生转成成 pdf
前端·pdf·html
PM老周36 分钟前
2026年Confluence替代软件:企业知识库选型指南
前端·人工智能·编辑器·团队开发