后端给前端传response下载excel文件

功能背景：

项目中使用vue作为框架，以axios方式来发送post请求，后台返回了一个包含了excel文件流的response。

遇到的问题：

调用了接口之后，不报错也不进行下载

遇到问题的原因：

是由于ajax请求只是一个字符型的请求，但是文件是以二进制进行传输的，ajax无法解析后台返回的文件流，因此，调用无反应。

解决：

在调用下载接口的时候，规定responseType：‘blob’，表示后台传来的数据用blob对象接收

以下是解决之后的前端代码

exportExcel(ids){if (ids instanceof Array && ids.length < 1) {this.$notification.error({message: "请选择要导出的数据！",});return;}let formData = new FormData();formData.append("ids",ids)axios({ // 用axios发送post请求method: 'post',url: api.exportDictionaryExcel(), // 请求地址data: formData, // 参数responseType: 'blob' // 表明返回服务器返回的数据类型}).then((res) => { // 处理返回的文件流const content = resconst blob = new Blob([content])console.log(content)const fileName = 'xxx.xlsx'if ('download' in document.createElement('a')) { // 非IE下载const elink = document.createElement('a')elink.download = fileNameelink.style.display = 'none'elink.href = URL.createObjectURL(blob)document.body.appendChild(elink)elink.click()URL.revokeObjectURL(elink.href) // 释放URL 对象document.body.removeChild(elink)} else { // IE10+下载navigator.msSaveBlob(blob, fileName)}})},

以下是解决之后的后端代码

public static void download(Workbook wb, HttpServletResponse response, String returnName) throws IOException{response.setContentType("application/octet-stream;charset=UTF-8");// 保存的文件名,必须和页面编码一致,否则乱码returnName = URLEncoder.encode(returnName, "UTF-8");response.setHeader("Content-Disposition", "attachment;filename=" + returnName);wb.write(response.getOutputStream());}

后端给前端传response下载excel文件相关推荐

导出 excel 表格（纯前端）和下载excel 文件
这里下载 excel 主要讲解两种方式.一种是前端导出excel ,另一种方式是通过调用后台提供的接口进行下载 excel. (一)前端导出excel 1.Element组件库中的el-table表格 ...
react接收后端文件_React获取Java后台文件流并下载Excel文件流程解析
记录使用blob对象接收java后台文件流并下载为xlsx格式的详细过程,关键部分代码如下. 首先在java后台中设置response中的参数: public void exportExcel(Htt ...
前端axios下载excel文件(二进制)的处理方法
前端axios下载excel文件(二进制)的处理方法后端生成excel后,前端 click 事件进行下载 ,脱坑记录,亲测有效. lz 使用的是 axios 发起请求 , 首先,介绍一下思路,准备通 ...
前端下载excel文件功能的三种方法
1 从后端接收json数据,前端处理生成excel下载 JsonExportExcel的github地址:https://github.com/cuikangjie/JsonExportExcel 这 ...
java使用jxl生成excel表格,jsp使用js下载excel文件xls
java使用jxl生成excel表格,jsp使用js下载excel文件后端代码 maven jar包主体代码逻辑引入的jar包具体代码段重点详解表头和表格内容两种格式直接将 HttpSe ...
php通过ajax下载文件,PHP使用ajax的post方式下载excel文件简单示例
本文实例讲述了PHP使用ajax的post方式下载excel文件.分享给大家供大家参考,具体如下: 项目需求,前端发起ajax请求,后端生成excel并下载,同时需要在header头中,带上token ...
PHP使用ajax的post方式下载excel文件简单示例
本文实例讲述了PHP使用ajax的post方式下载excel文件.分享给大家供大家参考,具体如下: 项目需求,前端发起ajax请求,后端生成excel并下载,同时需要在header头中,带上token ...
java文件流下载excel_React获取Java后台文件流下载Excel文件
记录使用blob对象接收java后台文件流并下载为xlsx格式的详细过程,关键部分代码如下. 首先在java后台中设置response中的参数: public void exportExcel(Htt ...
h5页面如何预览excel文件_如何使用JavaScript实现前端导入和导出excel文件?(H5编辑器实战复盘)...
前言最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解 ...

后端给前端传response下载excel文件

后端给前端传response下载excel文件相关推荐

最新文章

热门文章