1. 检查后端返回的数据格式

  • 确认接口响应:确保后端返回的是二进制流(如 ArrayBuffer)或 Base64 编码的 Excel 文件,而非 JSON 字符串。

    • 用浏览器开发者工具(Network 标签)检查接口响应类型:

      • 正确的 Content-Type 应为 application/vnd.openxmlformats-officedocument.spreadsheetml.sheet(xlsx)或 application/vnd.ms-excel(xls)。

      • 响应体应为二进制(非可读文本)。

2. 前端正确处理二进制数据

方案 1:直接下载(推荐)

如果后端返回的是文件流,前端无需手动生成文件,直接触发下载:

// 假设使用 axios
axios.get('/api/export', {responseType: 'blob', // 关键:指定响应类型为 Blob
}).then(response => {const url = window.URL.createObjectURL(new Blob([response.data]));const link = document.createElement('a');link.href = url;link.setAttribute('download', 'data.xlsx');document.body.appendChild(link);link.click();document.body.removeChild(link);
});
方案 2:手动构造 Blob

如果后端返回的是 Base64 编码:

const base64Data = '后端返回的Base64字符串';
const byteCharacters = atob(base64Data);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });// 触发下载(同方案1)

3. 编码问题处理

乱码的可能原因
  • 响应头缺失:后端未设置 Content-Disposition 或 Content-Type

  • 前端未正确解码:如 Base64 解码错误或字符集不匹配。

解决方案
  • 强制设置编码(适用于乱码):

    const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' });

    检查文件名编码:如果文件名乱码,后端需在 Content-Disposition 中编码文件名:

    Content-Disposition: attachment; filename*=UTF-8''%E6%95%B0%E6%8D%AE.xlsx

    4. 常见错误排查

    问题现象可能原因解决方案
    文件损坏,无法打开Blob 类型错误或数据截断检查 responseType: 'blob' 和响应数据完整性
    文件名乱码响应头未编码文件名后端设置 filename*=UTF-8''xxx
    浏览器直接显示乱码文本未正确识别为二进制流确保 Content-Type 和 responseType 匹配
    文件内容为 JSON 文本后端实际返回了 JSON 数据检查接口逻辑,确保返回文件流

    5. 测试工具验证

  • 使用 Postman 或 Curl 直接请求接口
    确认下载的文件是否正常。如果后端返回的文件本身有问题,需优先修复后端。

  • 对比前后端文件
    用二进制工具(如 Hex Editor)比较前后端生成的文件,确认是否一致。

6. 终极备用方案

如果以上方法无效,尝试纯前端生成 Excel(适用于数据量小的场景)

import * as XLSX from 'xlsx'; // 使用 sheetjs 库const data = [[“姓名”, “年龄”], [“张三”, 25]];
const ws = XLSX.utils.aoa_to_sheet(data);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
XLSX.writeFile(wb, "export.xlsx");

总结步骤

  1. 确认后端返回的是二进制流(非 JSON)。

  2. 前端指定 responseType: 'blob'

  3. 正确构造 Blob 并设置 MIME 类型

  4. 检查响应头编码和文件名

  5. 如仍失败,换用纯前端库生成 Excel 或联调后端修复数据源。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/diannao/95095.shtml
繁体地址,请注明出处:http://hk.pswp.cn/diannao/95095.shtml
英文地址,请注明出处:http://en.pswp.cn/diannao/95095.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2025年Cloudflare WAF防护机制深度剖析:5秒盾绕过完全指南

2025年Cloudflare WAF防护机制深度剖析&#xff1a;5秒盾绕过完全指南 技术概述 Cloudflare作为全球领先的CDN和网络安全服务提供商&#xff0c;其WAF&#xff08;Web Application Firewall&#xff09;防护系统已经成为现代Web安全的标杆。特别是其标志性的"5秒盾"…

【Android调用相册、拍照、录像】等功能的封装

关于调用Android项目 关于Android中调用相机拍照、录像&#xff0c;调用相册选图等是比较繁琐的&#xff0c;为了减少代码冗余&#xff0c;肯定需要封装成工具类&#xff0c;最终使用大概如下&#xff0c;大部分代码使用Java编写&#xff0c;因为需要照顾到不适用kotlin的伸手…

Git 分支管理:从新开发分支迁移为主分支的完整指南

问题背景 我在使用 Git 进行开发时&#xff0c;由于原有的主分支遭到了污染&#xff0c;不得已在多方尝试之后&#xff0c;决定替换原有的主分支。创建一个新分支并完成了重要修改&#xff1a; 基于提交 0fcb6df0f5e8caa3d853bb1f43f23cfe6d269b18 创建了 new-development 分支…

nginx常见问题(四):端口无权限

当 Nginx 日志报错 bind() to 80 failed (13: Permission denied) 时&#xff0c;这通常是由于权限不足导致 Nginx 无法绑定到 80 端口&#xff08;该端口为系统特权端口&#xff09;。以下是详细的问题分析与解决方案&#xff1a;一、问题原因分析80 端口属于 系统特权端口&am…

【线性代数】线性方程组与矩阵——(3)线性方程组解的结构

上一节&#xff1a;【线性代数】线性方程组与矩阵——&#xff08;2&#xff09;矩阵与线性方程组的解 总目录&#xff1a;【线性代数】目录 文章目录9. 向量组的线性相关性与线性方程组解的结构9.1. 向量组及其线性组合9.2. 向量组的线性相关性9.3. 向量组的秩9.4. 线性方程组…

机器学习-----K-means算法介绍

一、为什么需要 K-Means&#xff1f;在监督学习中&#xff0c;我们总把数据写成 (x, y)&#xff0c;让模型学习 x → y 的映射。 但现实中很多数据根本没有标签 y&#xff0c;例如&#xff1a;啤酒&#xff1a;热量、钠含量、酒精度、价格用户&#xff1a;访问时长、点击次数、…

Spring Security自动处理/login请求,后端控制层没有 @PostMapping(“/login“) 这样的 Controller 方法

一&#xff1a;前言 &#xff08;1&#xff09;Spring Security概念&#xff1a; Spring Security 是属于 Spring 生态下一个功能强大且高度可定制的认证和授权框架&#xff0c;它不仅限于 Web 应用程序的安全性&#xff0c;也可以用于保护任何类型的应用程序。 &#xff08…

idea开发工具中git如何忽略编译文件build、gradle的文件?

idea开发工具中&#xff1a; git显示下面这个文件有变更&#xff1a; ~/Documents/wwwroot-dev/wlxl-backend/java/hyh-apis/hyh-apis-springboot/build/resources/main/mapping/AccountRealnameMapper.xml 我git的根路径是&#xff1a; ~/Documents/wwwroot-dev/wlxl-backend/…

状态机浅析

状态机是处理状态依赖型行为的高效工具&#xff0c;通过结构化建模状态转换&#xff0c;解决了传统条件判断的冗余和混乱问题。它在设备控制、流程管理、协议解析等场景中表现优异&#xff0c;核心优势在于逻辑清晰、可扩展性强和易于调试。 一、介绍 1. 概念 状态机&#x…

Windows 手动病毒排查指南:不依赖杀毒软件的系统安全防护

Windows 手动病毒排查指南&#xff1a;不依赖杀毒软件的系统安全防护 在数字时代&#xff0c;电脑病毒就像潜伏的"网络幽灵"&#xff0c;从窃取隐私的木马到消耗资源的蠕虫&#xff0c;时刻威胁着系统安全。当杀毒软件失效或遭遇新型威胁时&#xff0c;手动排查病毒便…

GPT-5 is here

GPT-5 is here https://openai.com/index/introducing-gpt-5/ — and it’s #1 across the board! #1 in Text, WebDev, and Vision Arena #1 in Hard Prompts, Coding, Math, Creativity, Long Queries, and more Tested under the codename “summit”, GPT-5 now holds the …

【华为机试】55. 跳跃游戏

文章目录55. 跳跃游戏题目描述示例 1&#xff1a;示例 2&#xff1a;提示&#xff1a;解题思路一、问题本质与建模二、方法总览与选择三、贪心算法的正确性&#xff08;直观解释 循环不变式&#xff09;四、反向贪心&#xff1a;等价但有启发的视角五、与动态规划的对比与误区…

RabbitMQ面试精讲 Day 18:内存与磁盘优化配置

【RabbitMQ面试精讲 Day 18】内存与磁盘优化配置 开篇&#xff1a;内存与磁盘优化的重要性 欢迎来到"RabbitMQ面试精讲"系列的第18天&#xff01;今天我们将深入探讨RabbitMQ的内存与磁盘优化配置&#xff0c;这是面试中经常被问及的高频主题&#xff0c;也是生产环…

【C++】string 的特性和使用

Ciallo&#xff5e; (∠・ω< )⌒★ string&#xff08;1&#xff09;1. 构造函数1.1 string();1.2 string(const char* s);1.3 string(const string& str);1.4 string(size_t n, char c);1.5 string(const string& str, size_t pos, size_t len npos);1.6 string(…

创始人IP的精神修炼:于成长中积蓄力量

IP 经济席卷之下&#xff0c;众多企业家常被 “是否入局 IP”“能否做好 IP” 的焦虑裹挟。这种潜藏的精神内耗&#xff0c;对企业根基的侵蚀往往胜过业绩的起伏。著名文化学者于丹在全球创始人 IP 领袖高峰论坛上的洞见&#xff0c;为创始人 IP 的精神成长照亮了前路&#xff…

gbase8s数据库中对象元数据查询

最近整理了gbase8s数据库中常见的元数据的查询&#xff0c;包括表、视图、序列、包、类型、触发器、plsql等等&#xff0c;仅供参考。set environment sqlmode oracle; drop package DBMS_METADATA; create or replace package DBMS_METADATA is function GET_DDL(objtype varc…

常用hook钩子函数

爬虫Hook技术常用字段和勾子函数 目录 Hook技术概述网络请求相关Hook浏览器环境HookJavaScript引擎Hook加密算法Hook反爬虫检测Hook实际应用示例Hook工具和框架 Hook技术概述 Hook&#xff08;钩子&#xff09;技术是一种在程序运行时拦截和修改函数调用的技术。在爬虫中&a…

【解决方法】华为电脑的亮度调节失灵

华为电脑的亮度调节失灵 参考文章&#xff1a; 华为电脑屏幕亮度怎么调不了&#xff1f;华为电脑调节亮度没反应解决教程 亲测&#xff0c;在控制面板中卸载HWOSD&#xff0c;再重装有用。

【软考中级网络工程师】知识点之 DCC 深度剖析

目录一、DCC 是什么1.1 定义阐述1.2 作用讲解二、DCC 工作原理2.1 拨号触发机制2.1.1 感兴趣流量定义2.1.2 触发拨号过程2.2 链路建立流程2.2.1 物理链路连接2.2.2 数据链路层协议协商三、DCC 配置要点3.1 基础配置步骤3.1.1 接口配置3.1.2 拨号映射配置3.2 高级配置参数3.2.1 …

W5500之Socket寄存器区介绍

W5500之Socket寄存器区介绍1)、Socket n模式寄存器(Socket n Mode Register&#xff0c;简写Sn_MR)偏移地址为0x0000&#xff0c;可读写&#xff0c;复位值为0x00&#xff1b;Bit7Bit6Bit5Bit4Bit3Bit2Bit1Bit0MULTI/MFENBCASTBND/MC/MMBUCASTB/MIP6BP3P2P1P0MULTI/MFEN占用“S…