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

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

相关推荐
Nan_Shu_6141 小时前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
excel2 小时前
Vue3 中的双向链表依赖管理详解与示例
前端
谢尔登2 小时前
【Nest】基本概念
javascript·node.js·express
前端小白从0开始3 小时前
Chrome DevTools高级用法:性能面板内存泄漏排查
前端·chrome·chrome devtools
EveryPossible3 小时前
带有渐变光晕
前端·javascript·css
jojo是只猫3 小时前
Vue 3 开发的 HLS 视频流播放组件+异常处理
前端·javascript·vue.js
卓码软件测评3 小时前
第三方软件登记测试机构:【软件登记测试机构HTML5测试技术】
前端·功能测试·测试工具·html·测试用例·html5
CS Beginner3 小时前
【html】canvas实现一个时钟
前端·html
林烈涛4 小时前
js判断变量是数组还是对象
开发语言·前端·javascript
Komorebi_99994 小时前
Unocss
开发语言·前端