前端如何获取响应头Content-Disposition中的filename

问题:

后端在返回文件流时,将文件类型放在了响应头中,需要前端获取filename后手动添加文件名后缀。

代码:

前端:

downloadFile(response, fileName) {
	const headers = response.headers;
	const contentType = headers['content-type'];
	const blob = new Blob([response.data], { type: contentType });
	const temp = response.headers['content-disposition'];
	let filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
	let matches = filenameRegex.exec(temp);
	let fileType = '';
	if (matches != null && matches[1]) {
		fileType = matches['input'].substring(matches['input'].lastIndexOf('.'));
	}
	var downloadElement = document.createElement('a');
	var href = window.URL.createObjectURL(blob); //创建下载的链接
	downloadElement.href = href;
	downloadElement.download = fileName + fileType; //下载后文件名
	document.body.appendChild(downloadElement);
	downloadElement.click(); //点击下载
	document.body.removeChild(downloadElement); //下载完成移除元素
	window.URL.revokeObjectURL(href); //释放掉blob对象
}

后端:

header默认只有六种 simple response headers (简单响应首部)可以暴露给外部:

  • Cache-Control
  • Content-Language
  • Content-Type
  • Expires
  • Last-Modified
  • Pragma

需要后端添加setHeader,将Content-disposition暴露出来以便前端访问获取。

response.setHeader("Access-Control-Expose-Headers", "Content-Disposition")
response.setHeader("Content-Disposition", ...)

### 回答1: content-disposition 是 HTTP 协议中的一个头部字段,用于指示如何处理被请求的消息体。通常,它被用于下载文件时,指示浏览器以何种方式处理下载文件的响应。 获取 content-disposition 的方式取决于你是在客户端还是服务端。如果你是在客户端,可以使用浏览器的开发者工具查看响应头部中是否包含 content-disposition 字段。如果你是在服务端,可以查看响应头部的 content-disposition 字段来获取其值。 以下是一个示例 HTTP 响应,其中包含 content-disposition 字段: ``` HTTP/1.1 200 OK Content-Type: application/octet-stream Content-Disposition: attachment; filename="example.txt" Content-Length: 1234 <file content> ``` 在这个示例中,content-disposition 的值是 attachment; filename="example.txt",指示浏览器应该将响应的消息体作为附件下载,并将文件名设置为 example.txt。 ### 回答2: 获取content-disposition可以通过以下几种方式实现: 1. 前端通过发送HTTP请求获取响应头中的content-disposition字段。可以使用XMLHttpRequest对象或fetch函数发送异步请求,并通过getResponseHeader方法获取content-disposition的值。 2. 在使用fetch函数发送请求时,可以通过设置请求的credentials属性为include,以便在跨域请求时,服务器可以将带有content-disposition字段的响应头发送给前端。 3. 如果前端使用的是某个特定的JavaScript库,如axios,可以查看库的文档,了解是否提供了获取响应头的方法,如通过拦截响应的方式。 需要注意的是,获取content-disposition字段可能会受到跨域资源共享(CORS)策略的限制。如果服务器没有明确允许前端访问content-disposition字段,前端将无法获取到该字段的值。在这种情况下,可以考虑使用服务器端的代理来获取content-disposition的值,并将其传递给前端。 总结起来,前端可以通过发送HTTP请求并获取响应头中的content-disposition字段来获取该字段的值。具体的实现方法可以根据前端所使用的技术栈和环境进行调整。 ### 回答3: 前端无法直接获取`content-disposition`,因为`content-disposition`是HTTP响应头部字段,在前端无法直接访问和获取。`content-disposition`常用于指定服务器响应的文件名称和下载方式。 前端可以通过发送HTTP请求并获取响应头部来获取`content-disposition`。常见的方法是使用AJAX或Fetch来发送请求,然后在返回的响应头部中查找`content-disposition`字段。 以下是一个示例使用Fetch API获取`content-disposition`的方法: ```JavaScript fetch('http://example.com/file', { method: 'GET', headers: { 'Content-Type': 'application/octet-stream', }, }) .then(response => { const contentDisposition = response.headers.get('content-disposition'); console.log(contentDisposition); }) .catch(error => { console.log(error); }); ``` 这段代码通过使用Fetch API发送一个GET请求到`http://example.com/file`,然后从响应头部中获取`content-disposition`字段的值,并将其打印到控制台。 需要注意的是,跨域请求需要在服务器端设置适当的响应头部,以允许前端访问响应头部。否则,浏览器将会阻止前端获取其他域的响应头部,以保护用户的安全和隐私。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值