eleemnt-ui 前端下载后端返回的文件流，取请求头content-disposition中的文件名称

最新推荐文章于 2024-05-28 16:09:15 发布
最新推荐文章于 2024-05-28 16:09:15 发布
阅读量1.9k 收藏 9
点赞数 2
文章标签： 前端 javascript servlet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42530606/article/details/130108138
版权
在控制台Network里明明能看到，但是在响应拦截器里用js headers[“content-disposition”]来获取，但是打印 header对象里并没有content-disposition，无法获取，这是什么原因？上面问题提到的content-disposition不在其中，所以即使服务器在协议回包里加了该字段，但因没“暴露”给外部，客户端就“看得到，吃不到”。意思就是说让客户端只可以访问得到，既可以在Network里看到，也可以在代码里获取到他们的值。此时获取到的是一个乱码。
摘要由CSDN通过智能技术生成

1、用普通方法调取后端接口

// 发送日志账单下载
export function sendLOgDownLoad(query) {
   
  return request({
   
    url: '/business/vintexsale/mgr/download/F0902007',
    method: 'post',
    data: query,
    responseType: "blob"
  })
}

发送协议请求一个文件流，需要在回包里拿到响应头里的Content-Disposition字段的值，从中分离出文件名

最低0.47元/天 解锁文章
皮卡丘是个程序猿
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端如何获取响应头Content-Disposition中的filename,获取文件类型fileType进行不同类型的文件预览
freddy的博客
01-05 1731
【代码】前端如何获取响应头Content-Disposition中的filename,获取文件类型fileType进行不同类型的文件预览。
在PHP中使用X-SendFile头让文件下载更快
10-25
在PHP中，加速文件下载的方法之一是利用X-SendFile技术。这个技术允许你通过Web服务器（如Apache或Nginx）直接向客户端发送文件，从而避免了PHP处理大文件时可能带来的性能瓶颈。以下是对这个知识点的详细解释： 1....
解决前后端分离项目后端设置响应头前端无法获取
weixin_42684368的博客
09-12 2305
解决前后端分离项目中前端获取不到响应头
axios无法获取响应头headers的Content-Disposition
最新发布
timebeign的博客
05-28 484
所以如果想要让客户端可以访问到其他的首部信息，服务器不仅要在heade里加入该首部，还要将它们在 Access-Control-Expose-Headers 里面列出来。2、原理（病灶）Access-Control-Expose-Headers 根据MDN文档：Access-Control-Expose-Headers。而响应首部 Access-Control-Expose-Headers 就是控制“暴露”的开关，它列出了哪些首部可以作为响应的一部分暴露给外部。最后运维配置又做了调整。
前端下载文件【含content-disposition异常处理】
qq_22841387的博客
03-22 1137
当然，如果你只需要一个简单的版本也可以直接用下面这个代码。当然，我们不单单只对文件进行处理，通常在这里还可以进行。通常，我们在下载文件时只需要告诉后端我需要文件即可。为方面后续所有文件的下载，所以采用了直接拦截。到后端则需要使用post版本的下载文件。若需要JS版本，只需要将对应的。若需要在下载文件时，
vue 下载方法
qq_52912134的博客
05-13 347
// 创建axios实例 const service = axios.create({ // axios中请求配置有baseURL选项，表示请求URL公共部分 baseURL: process.env.VUE_APP_BASE_API, // 超时 timeout: 10000 }) // 通用下载方法 export function download(url, params, filename) { return service.post(url, params, { transfor
前端如何获取响应头Content-Disposition中的filename
jojoyoyo88的博客
04-13 4789
后端在返回文件流时，将文件类型放在了响应头中，需要前端获取filename后手动添加文件名后缀。
content-disposition：创建并解析HTTP Content-Disposition标头
02-03
内容倾向 创建并解析HTTP Content-Disposition标头安装$ npm install content-dispositionAPI var contentDisposition = require ( 'content-disposition' )contentDisposition（文件名，选项） 使用给定的文件名...
React获取Java后台文件流并下载Excel文件流程解析
08-19
React获取Java后台文件流并下载Excel文件流程解析是指在React前端应用程序中，通过axios库发送POST请求到Java后台服务器，以获取Excel文件流，并将其下载到本地计算机中。该过程涉及到Java后台服务器的响应头设置、...
(完整版)Java-Web以流方式下载文件时的HTTP头设置.doc
11-15
`Content-Disposition`中的`filename`参数用于指定下载后文件的默认名称，当用户在浏览器中点击下载链接时，这个文件名会出现在保存文件对话框中。注意，这并不意味着文件会被自动保存到用户的特定位置，而是让用户...
Javascript前端下载后台传来的文件流代码实例
10-14
本篇文章将详细解释如何使用JavaScript处理后台传来的文件流，并实现前端下载功能。 首先，我们需要发送一个HTTP请求来获取文件流。在示例代码中，这个请求通常是一个GET请求，可以通过`axios`或`fetch`等库来实现...
vue中使用axios获取不到响应头Content-Disposition的解决办法
2301_76604664的博客
04-09 2657
【代码】vue中使用axios获取不到响应头Content-Disposition的解决办法。
前端实现Blob下载功能，后端定义文件名（Content-Disposition问题与解决）
ts_shinian_web
12-04 1927
在Web应用中，我们经常需要实现文件的下载功能。有时，这个文件可能是用户上传的，有时则可能是服务器端生成的。不论哪种情况，我们都可以利用HTTP的`Content-Disposition`头信息来设定下载时的文件名。下面，我们就来看看如何在前端实现这个功能。 在实现这个功能时，前端需要通过调用接口，并通过接口请求头中的鉴权，获取到后端设置的`Content-Disposition`中的文件名，然后将数据流BloB化，下面分别使用xhr请求，fetch请求，axios请求进行代码示例实现下载功能。
文件下载
前端
06-22 2037
目前通常可以通过两种方式下载 服务端读取文件 public String readFileToString(String fullPath) throws Exception { String encoding = "UTF-8"; File file = new File(fullPath); Long filelength = file.length(); byte[] filecontent = new byte[filelength.i
HTTP 报头,Content-disposition
guomeiran的专栏
10-28 1121
Content-disposition 是 MIME 协议的扩展，MIME 协议指示 MIME 用户代理如何显示附加的文件。当 Internet Explorer 接收到头时，它会激活文件下载对话框，它的文件名框自动填充了头中指定的文件名。（请注意，这是设计导致的；无法使用此功能将文档保存到用户的计算机上，而不向用户询问保存位置。） Content-Disposition就是当用户想把请求所得的
前端下载后端返回的文件流，取请求头中的文件名称
weixin_52022921的博客
02-23 8907
前端下载后端返回的文件流，取请求头中的文件名称；axios 文件流，转为blob后，出现部分文件乱码的部分解决思路
【axios 使用】下载文件流 以及 获取响应头header content-disposition
m0_53584457的博客
05-06 7847
由于项目使用的是 apipost ，所以在使用的时候还要设置 isReturnNativeResponse -是否返回本机响应标头，一般可能设置 responseType: 'blob' 就可以了。//这里只把这个响应里的data返回回来了，所以取不到headers，想要全部信息就return response;响应首部 Access-Control-Expose-Headers 就是控制“暴露”的开关，它列出了哪些首部可以作为响应的一部分暴露给外部。这个时候就能在前端获取到响应的数据了。
前端获取不到响应头信息问题
TOTOcbz的博客
12-06 963
前端获取不到响应头信息
前端取不到后台返回response里边header内容问题
Angus
07-29 6507
我是在前后端调试下载文件的时候遇到的问题。 我下载文件的方式是返回二进制流。这种方式的话实际上是不能有return的，也就是时候不能把一些内容带给前端。比方说文件名，我们就需要放header里边。但是默认情况下，前端拿不到你定义的header字段。 那么解决方式实际上是比较简单的，我的解决方案如下： response.reset(); response.setHeader("Access-Control-Allow-Origin", "*"); ...
前端下载EXCEL文件，后端返回文件流的处理
05-30
前端下载 Excel 文件，后端需要返回文件流，可以按照以下步骤进行处理： 1. 后端根据前端请求参数，生成 Excel 文件，并将文件流返回给前端。 2. 前端通过 AJAX 发送请求，请求后端生成 Excel 文件的接口。 3. 后端在接收到请求后，使用相关的库（如 Apache POI）生成 Excel 文件，并将文件流返回给前端。 4. 前端在接收到后端返回的文件流后，使用 Blob 对象创建一个 URL，并将该 URL 赋给一个 a 标签的 href 属性。 5. 前端再使用 JavaScript 触发该 a 标签的 click 事件，即可下载 Excel 文件。 以下是一个示例的后端代码，使用了 Spring Boot 和 Apache POI 库： ```java @GetMapping("/downloadExcel") public ResponseEntity<byte[]> downloadExcel() throws IOException { // 创建 Excel 工作簿 Workbook workbook = new XSSFWorkbook(); Sheet sheet = workbook.createSheet("Sheet1"); // 创建表头 Row header = sheet.createRow(0); header.createCell(0).setCellValue("姓名"); header.createCell(1).setCellValue("年龄"); // 创建数据行 Row dataRow = sheet.createRow(1); dataRow.createCell(0).setCellValue("张三"); dataRow.createCell(1).setCellValue(20); // 将 Excel 文件写入字节数组输出流 ByteArrayOutputStream outputStream = new ByteArrayOutputStream(); workbook.write(outputStream); // 设置响应头 HttpHeaders headers = new HttpHeaders(); headers.add("Content-Disposition", "attachment;filename=test.xlsx"); headers.setContentType(MediaType.APPLICATION_OCTET_STREAM); // 返回响应实体 return new ResponseEntity<>(outputStream.toByteArray(), headers, HttpStatus.OK); } ``` 在前端中，可以使用以下代码实现下载： ```javascript axios.get('/downloadExcel', { responseType: 'blob' }).then(res => { const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }) const url = URL.createObjectURL(blob) const a = document.createElement('a') a.href = url a.download = 'test.xlsx' a.click() URL.revokeObjectURL(url) }) ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值