vue+Springboot+easyexecl 导出excel文件打不开

使用vue+Springboot+easyExecl导出文件时，在浏览器中下载的文件总是打不开，并且显示这个错误

1.我们逐步进行排查，首先看是不是后端的问题。这里附上我后端的代码

 @GetMapping("/downloadTemplate")public void download(HttpServletResponse response) throws IOException {response.setContentType("application/vnd.ms-excel");response.setCharacterEncoding("utf-8");response.setHeader("Content-disposition", "attachment;filename=example.xlsx");List<Entry> entries = new ArrayList<Entry>();Entry entry = new Entry();entry.setQuestion("整改方案很清楚，但酒店不愿意整改，怎么办？");entry.setAnswer("A:升级到区域协调，及时在甲方在的微信群反馈，任何纠纷我们都不与酒店交涉。");entry.setQuestionType("工程师问题");entry.setDataSource("美团");entry.setKeyword("整改，方案，不整改，不愿整改");entry.setQuestionCategory("踏勘问题");entry.setEquipmentCategory("流程问题");entries.add(entry);EasyExcel.write(response.getOutputStream(), Entry.class).registerWriteHandler(CellStyleUtils.getHorizontalCellStyleStrategy()).sheet("sheet1").doWrite(entries);}

在后端的代码中，使用easyExecl将响应的数据转为了流的形式，这个代码看起来没有问题，我们使用localhost+downloadTemplate的方式进行请求接口，这里我就不演示了，最终的结果是成功下载，并且可以正常打开，这证明我们后端的代码没有问题。

2.我们看一眼返回的响应数据，在控制台打印

再看我们前端的代码

request(downloadTemplate, METHOD.GET,null,{responseType: 'blob'}).then(res => {console.log(res)if (res.status === 200) {let blob = new Blob([res.data], {type: res.data.type})const fileName = 'ProductTemplateCopy.xlsx';let downloadElement = document.createElement('a')let href = window.URL.createObjectURL(blob); //创建下载的链接downloadElement.href = href;downloadElement.download = fileName; //下载后文件名document.body.appendChild(downloadElement);downloadElement.click(); //点击下载document.body.removeChild(downloadElement); //下载完成移除元素window.URL.revokeObjectURL(href); //释放blobthis.$message.info('导出成功')}

请求接口时，我们设置返回的应该是blob文件，再看我们第二步，可以看到在这里blob文件被硬生生转换成了json格式的代码。然后下载后的文件就损坏报错。

为什么会出现这种情况呢？

文件发生了变化，他是在哪变化的？因此我想到了是响应的时候某一个地方应该进行了处理，在此，我使用的是antd-vue-admin这个模板，其中的mockjs会对所有的前端请求进行一个拦截处理，就会对blob产生影响。所以我尝试将src/main中的mock注释

注释之后，重新尝试请求接口，最终成功了。下载的文件也可以打开了。因此本次bug出现的原因是mock处理导致blob发生了变化。
行文至此，如果对你有帮助，请为作者点个赞。

vue+Springboot+easyexecl 导出excel文件打不开相关推荐

(vue)vue导出excel文件打不开，或者文件内容为object object
(vue)vue导出excel文件打不开,或者文件内容为object object[已解决] bug: 主要原因:没有注意到后端返回的数据格式,需要的是res而不是res.data 正确写法: < ...
应用phpexcel导出excel文件后打不开的问题解决方法
应用phpexcel导出excel文件后打不开的问题解决方法参考文章: (1)应用phpexcel导出excel文件后打不开的问题解决方法 (2)https://www.cnblogs.com/im ...
swagger easyExcel导出Excel文件打不开，文件损坏
alibaba/easyexcel文件导出 swagger easyExcel导出Excel文件打不开,文件损坏文件下载打不开,将文件输出到本地发现可以打开,而且swagger下载的文件大小比本地文 ...
swagger接口导出excel文件打不开
swagger接口导出excel文件打不开: 接口添加produces="application/octet-stream" @ApiOperation(value = " ...
Vue前端表格导出Excel文件
前言分享一个Vue前端导出Excel文件的方法.记录学习! 功能需求:将表格的全部数据导出Excel格式的文件前端:Vue3+Element-Plus 这个导出方法全部为前端操作,后端只需要传入表 ...
poi 通过浏览器导出excel文件打不开
本机excel版本大于2007 maven引入jar包配置 <dependency><groupId>org.apache.poi</groupId><art ...
java导出excel 打不开,poi 通过浏览器导出excel文件打不开
本机excel版本大于2007 maven引入jar包配置 org.apache.poi poi-ooxml 3.9 dom4j dom4j 代码controller层 MemberSchoolCon ...
springboot中使用poi导出excel文件(亲测实现了第一个功能)
1.POI简介 Jakarta POI 是一套用于访问微软格式文档的Java API. 组件HWPF用于操作Word的; 组件HSSF用于操作Excel格式文件. 2.常用组件 HSSFWorkboo ...
Vue+iview实现自定义格式导出Excel文件
背景:项目中要实现一个导出Excel文件模板的功能,原来实现是通过后台生成然后前端请求下载,这样要消耗IO资源,然后看了一下之前项目的导出功能,发现原来Vue+iview可以实现本地数据导出,不过iv ...

vue+Springboot+easyexecl 导出excel文件打不开

使用vue+Springboot+easyExecl导出文件时，在浏览器中下载的文件总是打不开，并且显示这个错误

为什么会出现这种情况呢？

vue+Springboot+easyexecl 导出excel文件打不开相关推荐

最新文章

热门文章