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

最新推荐文章于 2024-06-26 16:10:09 发布
最新推荐文章于 2024-06-26 16:10:09 发布
阅读量1.7w 收藏 23
点赞数 5
分类专栏： 前端导出excel文件 js vue 文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiao903498225/article/details/113613799
版权

常用的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使用的是哪种mine-type

2. 需要在请求参数中设置 responseType: 'arraybuffer'

3. 下载按钮代码如下

B. content-type: "application/vnd.ms-excel" 的方案

1. 下载按钮代码

qiao903498225
关注
  • 5
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
10行代码解决前端table导出Excel
08-19
温馨提示: 代码下载后的注意事项: 1.需要配路由访问此页面,文件是个Vue页面 2.需要npm 两个依赖:file-saver和xlsx (注意！随着版本的迭代，新版本已经不适用该方法，故，需要指定版本号。 npm i xlsx@0.16.8和npm i file-saver@2.0.5) 3.百分百可用,失败报错的,请留言
前端导出Excel table2excel
11-20
前端导出excel，所见即所得，可以设置不导出列，可以设置不导出列，可以设置不导出列，简单方便，注释详细
vue2/ElementUi+Springboot+EsayExcel导出表格，“Excel无法打开文件”填坑
weixin_55067403的博客
06-16 390
但是后端方法设置返回值为void,导致框架无法正常获取响应状态码，所以在处理响应的时候，要考虑一下这里的特殊情况！2、因为要用后台的response返回文件流，所以后台导出方法返回值要设置为void，让EasyExcel的write和response输出流进行主动返回。因为我是基于vue2+ElementUi做的前端 Maven+springboot做的后台，所以技术栈不契合的，请自行补课。3、mybatis中的查询及返回给导出类的映射数据不能为空，所以如果可能出现空值的字段，要提前做好处理。
文件上传（模板导出、批量导入）
qq_42181155的博客
11-10 7274
excel模板导入导出功能，用于批量导入数据到库
vue下载文件导出excel
weixin_38738049的博客
10-10 594
1java后台response返回流数据 public void tableToExcel(HttpServletRequest request, HttpServletResponse response) throws Exception { response.setContentType("application/vnd.ms-excel"); response.setCharacterEncoding("UTF-8"); response.setHeader("Cont
关于EXCEL下载后无法打开的问题
weixin_33882443的博客
08-04 1317
通过流的下载的方式下载文件的需求很普遍，也基本不太会错，但最近用VPN（这套系统用的是网页反代的方式来实现），下载的Excel却无法打开，仔细检查后通过增加ContentType，修正了这个问题。代码分享如下：byte[] bytes = System.IO.File.ReadAllBytes(path); ms.Write(bytes, 0, byte...
Excel下载打不开
weixin_30568715的博客
03-12 85
1.问题描述：今天遇到个问题，对于定时发送邮件，前两天还正常，今天发现邮件能收到，但打不开，显示如下错误： 　　预览邮件显示： 　　 　　点击Excel打开，显示如下： 2.问题解决方案 　　删除对于服务器上部分空间内存即可（看哪个占100%，就删拿个目录下的部分文件） 3.测试 　　由于是定时邮件,为了方便测试,把定时时间改为现在时刻，经测试，恢复如初了！ ...
新建Excel无法打开解决办法
Botree_chan的博客
11-24 9590
废话不多说，直接上方法吧： 1.打开电脑“C:\Program Files (x86)\Microsoft Office\root\vfs\Windows\SHELLNEW”目录，下面应该有个“EXCEL12.XLSX”表格文件，如果有就下一步，没有的话找到它（怎么找我不管）。 2.WIN+R，运行regedit，打开注册表编辑器，然后在HKEY_CLASSES_ROOT下
下载excel打开后弹出警告提示，文件类型和文件内容不符问题处理
热门推荐
jzt_designer的专栏
07-21 1万+
在网页下载excel时，一定要正确设置response头中的content-type；即设置正确的mime type,具体设置如下： Ext   MIME Type   .doc   application/msword   .dot   application/msword   ...
前端导出excel文件，本地下载后无法打开或格式错误
成长之痛
03-05 2928
在处理前端下载文件的问题时，我们需要注意数据的格式、响应类型的设置以及如何正确地获取数据。同时，还需要关注项目中可能存在的响应拦截器，确保它们不会影响到我们的下载逻辑。通过仔细地排查和分析，我们可以找到问题的根源并解决它。
java下载Excel报500 Internal Server Error，下载的excel文件乱码打不开
shujuku____的博客
07-30 2034
本地在postman上跑是是没有问题的，原始服务器也没问题，同样的代码换服务器跑就有问题。查看日志，也没报错，但是返回状态却是500，保存excel打开是乱码。下载文件如果知道文件的类型，还是输出相对应的文件类型，不要用bin这种，可能是文件类的输出类型，不然会出现一些莫名奇妙的问题。解决方法这里是下载excel文件有问题，下载的时候指定响应内容类型为excel。首先，乱码打不开，要考虑输出格式的问题。......
纯前端：luckysheet在线编辑Excel导出，Excel文件导入
10-09
总的来说，Luckysheet作为一个强大的纯前端Excel解决方案，不仅提供了丰富的功能，还具备高度的可扩展性和灵活性。通过深入理解和运用这个库，开发者可以轻松地在Web应用中构建出媲美Excel的表格编辑功能，极大地...
js前端Excel大数据处理导入
07-05
本主题将深入探讨如何使用JavaScript来处理Excel文件，尤其是面对大数据量时的策略。 首先，我们需要了解JavaScript在浏览器环境中的限制，尤其是内存和执行时间限制。由于JavaScript运行在浏览器沙箱环境中，它不...
JS操作Excel：使用js-xlsx实现前端导出Excel文件
04-06
JavaScript是前端开发的主要语言，而js-xlsx是一个强大的开源库，专门为JavaScript设计，用于处理Excel文件。这个库允许开发者在不依赖服务器的情况下读取、写入和转换Excel数据，极大地扩展了前端处理复杂数据的...
解决前端做excel下载报错Content type ‘application/vnd.openxmlformats-officedocument.spreadsheetml.sheet；charse
最新发布
m0_53942074的博客
06-26 682
后端设置的请求头是application/vnd.openxmlformats-officedocument.spreadsheetml.sheet，前端设置这个就报错。要设置成application/json，就可以成功导出表格了，`responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
setContentType(applicationvnd.openxmlformatsofficedocument.spreadsheetml.sheet；charset=utf-8)导出表出错
你我皆是黑马
02-08 1万+
setContentType("application/vnd.openxmlformatsofficedocument.spreadsheetml.sheet;charset=utf-8")导出Excel表时出错
导入, 导出 EXCel
08-24 745
1.首先在页面PageLoad 的时候 加入JS 脚本 防止死页               // js 用于可多次进行 Excel导出             this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "alterFormSubmitEvent", "beforeSubmit();", true);
一句话解决 phpexcel 乱码
ecba1988的专栏
10-28 969
header('Content-Type: application/vnd.ms-excel'); header('Content-Disposition: attachment;filename="01simple.xls"'); header('Cache-Control: max-age=0'); // If you're serving to IE 9, t
js——excel导出
Sunshine0508的博客
03-22 762
//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.
ajax导出excel文件乱码怎么解决
06-07
在使用 Ajax 导出 Excel 文件时，出现乱码的原因可能是因为 Excel 文件的编码与浏览器的编码不一致。解决这个问题可以尝试使用以下方法： 1. 在 Ajax 请求中设置 responseType 为 'blob'，并指定 Excel 文件的编码格式为 utf-8，例如： ``` $.ajax({ url: 'your-url', method: 'GET', responseType: 'blob', success: function(data) { var blob = new Blob([data], {type: 'application/vnd.ms-excel;charset=utf-8'}); var url = window.URL.createObjectURL(blob); var link = document.createElement('a'); link.href = url; link.download = 'file-name.xlsx'; link.click(); } }); ``` 2. 如果上述方法仍然不能解决问题，可以在服务器端生成 Excel 文件时指定编码格式为 utf-8，例如 PHP 中可以使用以下代码： ``` header('Content-Type: application/vnd.ms-excel;charset=utf-8'); header('Content-Disposition: attachment;filename="file-name.xlsx"'); ``` 其中，第一行代码指定了 Excel 文件的 MIME 类型和编码格式，第二行代码指定了文件名和文件格式。 3. 如果仍然不能解决问题，可以尝试在服务器端生成 Excel 文件时使用 UTF-8 编码，并将文件内容进行 Base64 编码，然后将编码后的字符串返回给前端，前端再将字符串转换为 Blob 对象进行下载。具体实现可以参考以下代码： ``` $.ajax({ url: 'your-url', method: 'GET', success: function(data) { var blob = new Blob([base64ToArrayBuffer(data)], {type: 'application/vnd.ms-excel;charset=utf-8'}); var url = window.URL.createObjectURL(blob); var link = document.createElement('a'); link.href = url; link.download = 'file-name.xlsx'; link.click(); } }); function base64ToArrayBuffer(base64) { var binaryString = window.atob(base64); var binaryLen = binaryString.length; var bytes = new Uint8Array(binaryLen); for (var i = 0; i < binaryLen; i++) { var ascii = binaryString.charCodeAt(i); bytes[i] = ascii; } return bytes; } ``` 其中，base64ToArrayBuffer 函数用于将 Base64 编码的字符串转换为 ArrayBuffer 对象，用于创建 Blob 对象。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值