解决前端做excel下载报错Content type ‘application/vnd.openxmlformats-officedocument.spreadsheetml.sheet；charse

心止不住的痛

已于 2024-06-26 16:16:54 修改

阅读量7k

点赞数 5

文章标签： excel 前端 vue.js

于 2024-06-26 16:10:09 首次发布

本文链接：https://blog.youkuaiyun.com/m0_53942074/article/details/139991799

版权

后端设置的请求头是application/vnd.openxmlformats-officedocument.spreadsheetml.sheet，前端设置这个就报错。要设置成application/json，就可以成功导出表格了，

`responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

心止不住的痛

关注关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

java导出word含表格并且带图片

zzchances的博客

04-17

421

通过 Java 动态导出 Word 文档，基于预定义的模板文件（如 .docx 格式），模板文件中有占位符，导出过程替换占位符为文本或图片

解决前端做excel下载的文件打不开

热门推荐

qiao903498225的博客

02-03

2万+

常用的excel对应得mine-type类型： 1. "application/vnd.ms-excel" 2. "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" 解决办法： A：content-type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" 的方案 1. 查看浏览器请求中content-type使...

1 条评论您还未登录，请先登录后发表或查看评论

前端接收下载流文件如何处理（如Excel文件）？

阿嚏乱码的地方

12-20

1927

function getExcel(url, name, type, method) { return Axios[method || 'get']((baseUrl + url), { // 处理二进制对象 responseType: 'blob', }).then((res) => { const blob = new Blob([res.data], {type: type || 'application/vnd.openxml..

setContentType(applicationvnd.openxmlformatsofficedocument.spreadsheetml.sheet；charset=utf-8)导出表出错

你我皆是黑马

02-08

1万+

setContentType("application/vnd.openxmlformatsofficedocument.spreadsheetml.sheet;charset=utf-8")导出Excel表时出错

前端实现文件下载

m0_48639280的博客

05-19

326

方法一：使用传统方法 // 使用location直接访问，后端将文件写入responce即可 window.location.href = url; 后端设置响应头 response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"); response.setCharacterEncoding("utf-8"); // 这里URLEncod

解决报错：file ‘xxx‘ is not a Word file, content type is ‘application/vnd.openxmlformats-officedocument.t

weixin_74769910的博客

07-18

1930

在解析docx文件内容时报错：file 'xxx' is not a Word file, content type is 'application/vnd.openxmlformats-officedocument.themeManager+xml'这个错误可能是因为：首先查看文件属性，发现打开方式是wps，文件类型是DOCX 打开方式更改为word，再次运行依旧报错，说明是文件类型的原因。将文件内容复制一份，在word中新建文件，粘贴内容，查看新文件属性：解析这个新建的文件，再次运行：成功运行！

邮件生成.vnd.openxmlformats-officedocument.spreadsheetml.sheet的bug附件

qq_44737589的博客

07-02

4791

##先说一说产生的bug 这个为邮件附件的中的文件，应该是xxx.xlsx类型文件结果出现了这个。 File file = new File("网络测试厂商邮件附件发送问题" + ".xlsx"); //使用easyExcel生成excel EasyExcel.write(file) .head(head) .sheet(sheetName) .doWrite(body); //创建MimeMessag

各种文件对应的ContentType

lixilai_rjkf的博客

08-10

1万+

无

office对应的content-type

目标架构师

03-22

2365

office对应的content-type

前端下载后端的文件流（导出excel文件等）

weixin_52235911的博客

09-14

567

遇到的项目需求，客户需要选择日期，然后导出对应数据成excel表格并下载，

文件上传（模板导出、批量导入）

qq_42181155的博客

11-10

7778

excel模板导入导出功能，用于批量导入数据到库

各种类型文件的Content-Type

weixin_33682719的博客

01-30

1821

2019独角兽企业重金招聘Python工程师标准>>> ...

http请求post，返回excel文件，并接收

weixin_30843605的博客

03-22

2183

1.post的方法里要加responseType: 'arraybuffer'参数，不然下载的excel会乱码 2.使用{type: "application/vnd.ms-excel"}的写法，可以保存为xls格式的excel文件（兼容老版本）。而使用“application/vnd.openxmlformats-officedocument.spreadsheetml.sheet”则会保存为...

下载excel打开后弹出警告提示，文件类型和文件内容不符问题处理

jzt_designer的专栏

07-21

1万+

在网页下载excel时，一定要正确设置response头中的content-type；即设置正确的mime type,具体设置如下： Ext MIME Type .doc application/msword .dot application/msword ...

js——excel导出

Sunshine0508的博客

03-22

881

//res是返回的值，name是文件名 export const exportExcelFile = (res = {}, name) => { const blob = new Blob([res], { type: 'application/octet-stream' }); // , { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' } cons.

文件上传类型限制

朝歌

05-04

5627

一、上传文件时，可在input 框中添加 accept 属性来限制选择的文件类型，项目中使用时要限制上传类型为word，查找资料发现大部分列举的类型都只有对doc的限制，而对word2007以上的 docx 类型没法限制，下面给出方法 docx限制： application/vnd.openxmlformats-officedocument.wordprocessingml.document...

python爬取vnd.openxmlformats-officedocument.spreadsheetml.sheet类型数据

qq_29306999的博客

03-02

825

python处理xlsx类型数据

response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"); response.setHeader("Content-Disposition", "attachment;filename=UserAndInformation.xlsx");

最新发布

03-11

<think>好的，我需要帮助用户正确设置HTTP响应头以下载Excel文件。用户提到的问题是在浏览器中下载Excel文件时遇到问题，尽管已经处理了Content-Type。我需要根据提供的引用内容给出正确的设置方法。首先，根据引用[2]，设置Content-Type为Excel的类型是正确的，比如application/vnd.ms-excel。不过现在xlsx格式可能需要使用application/vnd.openxmlformats-officedocument.spreadsheetml.sheet。用户需要确认使用正确的MIME类型。其次，引用[3]指出前端需要设置responseType为'blob'，这很重要，因为二进制数据需要正确处理。但用户的问题是关于HTTP响应头的设置，所以后端也需要正确配置。然后，另一个关键点是Content-Disposition头，应该设置为attachment; filename="filename.xlsx"，这样浏览器才会触发下载而不是尝试显示文件。用户可能需要设置这个头，确保文件名正确。此外，可能的编码或缓存问题也需要考虑，比如设置Content-Transfer-Encoding和Cache-Control头，避免中间件修改数据。最后，结合前后端的配置，确保两者都正确无误。用户可能在后端没有正确设置Content-Disposition或者MIME类型，或者前端没有处理blob响应。需要分步骤说明如何设置这些头，并给出示例代码。</think>为了正确设置HTTP响应头以下载xlsx格式的Excel文件，需按以下步骤操作： ### 1. 设置响应内容类型（Content-Type）在HTTP响应头中明确指定文件类型为xlsx对应的MIME类型： ```java response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"); ``` 这是Office Open XML格式的标准类型，比旧版的`application/vnd.ms-excel`更准确[^2][^3]。 ### 2. 强制浏览器触发下载（Content-Disposition）添加附件下载指令并指定文件名： ```java response.setHeader("Content-Disposition", "attachment; filename=\"report.xlsx\""); ``` `attachment`模式会强制下载而非预览，文件名建议用英文避免编码问题[^3]。 ### 3. 二进制数据传输声明（可选）添加编码类型声明增强兼容性： ```java response.setHeader("Content-Transfer-Encoding", "binary"); ``` ### 4. 完整Java Servlet示例 ```java protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException { // 设置响应头 response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"); response.setHeader("Content-Disposition", "attachment; filename=\"data_export.xlsx\""); response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // 禁止缓存 // 写入Excel文件流 try (OutputStream out = response.getOutputStream()) { Workbook workbook = new XSSFWorkbook(); // ... 生成Excel内容 ... workbook.write(out); } } ``` ### 5. 前端注意事项前端请求需声明响应类型为`blob`： ```javascript axios.get('/export', { responseType: 'blob' // 必须声明二进制流接收 }).then(response => { const url = window.URL.createObjectURL(new Blob([response.data])); const link = document.createElement('a'); link.href = url; link.setAttribute('download', 'file.xlsx'); document.body.appendChild(link); link.click(); }); ``` ### 常见问题排查 - **文件名乱码**：使用RFC 5987编码 `filename*=UTF-8''${encodeURIComponent(filename)}` - **文件损坏**：检查服务端是否未关闭输出流 - **浏览器直接显示XML**：确认Content-Type未设置为`text/xml`