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

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

相关推荐
程序员鱼皮2 分钟前
干掉 Claude Code,这个开源 AI 编程工具杀疯了?
前端·后端·计算机·ai·程序员
我想吃烤肉肉5 分钟前
wait_until=“domcontentloaded“ 解释
开发语言·前端·javascript·爬虫·python
xkxnq6 分钟前
第一阶段:Vue 基础入门(第 12天)
前端·javascript·vue.js
q_191328469510 分钟前
基于Springboo和vue开发的企业批量排班系统人脸识别考勤打卡系统
前端·javascript·vue.js·spring boot·mysql·毕业设计·人脸识别
BianHuanShiZhe13 分钟前
swift计算文本高度
前端·javascript·html
wtsolutions15 分钟前
Sheet-to-Doc模板设计最佳实践:创建专业的Word模板
前端·javascript·数据库
C_心欲无痕15 分钟前
js - AbortController请求中止
开发语言·javascript·ecmascript
小二·24 分钟前
Vue 前端性能优化终极指南:Lighthouse 100 分实战(Vue 3 + Vite)
前端·vue.js·性能优化
LYFlied27 分钟前
深入解析服务端渲染(SSR):从原理到实践
前端·性能优化
用户9047066835727 分钟前
到底是用nuxt的public还是assets?一篇文章开悟
前端