SpringBoot+Vue下载Excel文件流(No converter、Excel乱码)
目录
- 介绍
- No converter
- Excel乱码
- 正确代码
- 后端代码
- 前端代码
- 方法1
- 方法2
- 方法3
介绍
后端使用SpringBoot、Mybatis Plus,前端使用Vue,进行Excel文件下载。
后端使用了Hutool工具提供的Excel文件流下载。
No converter
问题:
后端控制台出现No converter for [class com.common.lang.Result] with preset Content-Type 'application/vnd.ms-excel;charset=utf-8'
的错误
处理:
原来的代码返回一个对象(包含code、message、data等)。
public Result download (HttpServletResponse response) throws IOException {//省略return Result.succ("success");
}
改为:
public void download (HttpServletResponse response) throws IOException {//省略return;
}
就是把返回的参数类型设置为void,身为小白的我并不清楚原因。
Excel乱码
前端下载的Excel打开后出现:
于是参考:
https://www.cnblogs.com/yixiaoyang-/p/13042540.html
https://www.cnblogs.com/cynthia-wuqian/p/7927621.html
才得到了正确结果(测试数据):
正确代码
后端代码
关于Excel的操作可参考Hutool工具提供的Excel文件流下载,比如可以设置文件格式为xls或者xlsx。
@RequestMapping("/download")public void download (@RequestBody Map<String, Object> columnMap,HttpServletResponse response) throws IOException {List<String> row1 = CollUtil.newArrayList("aa", "bb", "cc", "dd");ExcelWriter writer = ExcelUtil.getWriter();writer.write(row1, true);response.setContentType("application/vnd.ms-excel;charset=utf-8");response.setHeader("Content-Disposition","attachment;filename=test.xls");ServletOutputStream out=response.getOutputStream();writer.flush(out, true);writer.close();IoUtil.close(out);return;
}
前端代码
方法1
其中responseType
可以设置为arraybuffer
或者blob
,必须要设置一个。
elink.download
后面的文件名可以随意设置(可中文),可以和后端的文件名不一样,最终会以前端设置的文件名为准,但文件后缀要和后端的xls或xlsx保持一致。
axios({baseURL: "http://localhost:8081/",url: "download",method: "post",data: data,// responseType: "arraybuffer", //可以使用arraybufferresponseType: "blob", //也可以使用blob}).then((res) => {console.log(res);if (res) { let blob = new Blob([res.data], {type: "application/vnd.ms-excel;charset=utf-8",}); // res就是接口返回的文件流了let objectUrl = URL.createObjectURL(blob); const elink = document.createElement("a");elink.download = "下载文件名称.xls"; //下载文件名称,elink.style.display = "none";elink.href = objectUrl;document.body.appendChild(elink);elink.click();URL.revokeObjectURL(elink.href); // 释放URL 对象document.body.removeChild(elink);}}).catch(function (error) {console.log(error);});
方法2
axios({baseURL: "http://localhost:8081/",url: "download",method: "post",data: data,// responseType: "arraybuffer",//可以使用arraybufferresponseType: "blob", //也可以使用blob}).then((res) => {console.log(res);if (res) {let blob = new Blob([res.data], {type: "application/vnd.ms-excel",}); // res就是接口返回的文件流了let objectUrl = URL.createObjectURL(blob);window.location.href = objectUrl; }}).catch(function (error) {console.log(error);});
代码行数减少了,但此时无法设置文件名:
里面的内容是正确的。
方法3
先引入一个包js-file-download:
cnpm install js-file-download --save
使用方法:
var fileDownload = require('js-file-download');
fileDownload(data, '文件名称.xls');
具体代入就是:
axios({baseURL: "http://localhost:8081/",url: "download",method: "post",data: data,// responseType: "arraybuffer",//可以使用arraybufferresponseType: "blob", //也可以使用blob}).then((res) => {console.log(res);if (res) {var fileDownload = require("js-file-download");fileDownload(res.data, "新方式.xls"); }}).catch(function (error) {console.log(error);});
与方法一相比,代码更简洁明了,只需要设置文件名。
SpringBoot+Vue下载Excel文件流(No converter、Excel乱码)相关推荐
- 【Vue 问题】文件流导出为excel无法打开
问题:文件流导出为excel无法打开 原因:文件流在请求中会被改变格式 解决方法: axios.create({baseURL: baseUrl,responseType: "arraybu ...
- 前端处理后端返回的excel文件流并下载
项目中遇到上传excel,后端写的接口是当重复上传相同信息的excel时会吐出excel二进制文件流,这种文件流需要前端下载供用户看. 首先后端的接口需要上传文件已formData形式上传 这里我用的 ...
- Java实现Excel下载,excel文件流输出到浏览器
关于实现Excel下载,我使用的是easypoi, easypoi功能如同名字easy,主打的功能就是容易,让一个没见接触过poi的人员就可以方便的写出Excel导出,Excel模板导出,Excel导 ...
- js接收excel文件流并解析下载文件
情景:后端为post请求,且接口返回为excel文件流 方法: 1.使用原生XMLHttpRequest 2.使用原生fetch 3.使用axios import qs from 'qs'import ...
- vue 接收后端文件流 并下载
在vue框架中, 接收并下载文件流(blob对象) 可以通过将其转成blob对象,添加到a标签或者iframe标签中来模拟下载(或者pdf预览) 1.首先设置responseType对象格式为 blo ...
- Vue下载本地pdf、word、excel文件
Vue下载本地pdf.word.excel文件 项目需求 具体实现 注意 项目需求 在项目中需要对pdf.word.excel等文档的下载 也就是获取文件的静态路径,下载到本地. 方案 :利用 axi ...
- nodejs调用后端接口返回excel文件流,nodejs再转发前端实现下载excel
今天在项目上遇到了一个问题,就是后端接口返回excel文件流,然后前端实现下载excel,前端下载的excel文件居然无法打开! 在网上搜索了很多对应的资料,也尝试了很多办法,还是没能解决,最后在这篇 ...
- SpringBoot+Vue+ElementUI实现文件上传与文件下载
作者: Memory(星哥) Wechat:/QQ: 574373426 整理不易,感谢支持,欢迎 收藏 转发 分享 专注IT职业教育多年,学编程找星哥 SpringBoot+Vue+ElementU ...
- springboot+Vue整合Luckysheet,实现在线编辑Excel表格
springboot+Vue整合Luckysheet,实现在线编辑Excel表格 功能:页面嵌入Luckysheet表格组件,能够在线编辑Excel表格,实现表格的读取,保存功能(不支持导出为xls文 ...
最新文章
- springboot整合springSecurity使用
- remoting和webservice的区别
- Mysql+innodb数据存储逻辑
- My97DatePicker详细说明
- 银行招聘网计算机类笔试,中国人民银行计算机类笔试模拟题
- 如何在idea中调试spring bean
- Linux虚拟化KVM-Qemu分析(四)之CPU虚拟化(2)
- c语言语法sc,适合于嵌入式系统的C语言单元测试框架:SCUNIT
- Linux Linux函数 Linux聊天程序 基于socket的TCP(有连接的)聊天程序
- 神器--通过Workspaces来编辑本地文件
- ae效果英文版翻译对照表_AE 特效中英翻译
- vue+elementui+阿里icon unicode 踩坑
- 街头篮球服务器维护,街头篮球官方网站
- hadoop可以解决什么问题_在家艾灸可以解决这些问题
- 计算机改名字sql2008不能登录,Win7电脑修改计算机名称后SQL2008数据库无法登录提示无法连接到load怎么处理...
- 数据爬取-奇技淫巧系列1——抓取隐藏在CDN,防爬代理等服务后面的数据
- 金庸群侠X版 会议纪要
- 谷歌浏览器禁用摄像头且无法通过设置修改的解决办法
- 微信群营销:有哪些加微信群的渠道?
- 单片机的停车场计数系统c51_基于51单片机的停车场车位管理系统
热门文章
- Linux云服务器下配置Scrapy并抓取数据
- Python理论模拟题
- ES6转ES5,Traceur使用方式
- 【Unity3D】Mecanim 盲点学习记录--Animator Controler Component
- selenium报错:This version of ChromeDriver only supports Chrome version xxx 的解决办法
- Android自定义ProgressBar样式
- 华为计算机产业线线部门,华为服务器产品线升级为智能计算业务部
- thinkpad e40 4sc安装windows7的一点感受
- python下载图片脚本_[python]非常小的下载图片脚本(非通用)
- 2020年最佳的5种社交媒体的数据抓取/网络爬虫工具