我找不到如何从angular 2文档中的内容配置读取文件名。有人能指导从angular 2 content headers中的服务器读取标题吗
vlf7wbxs1#
CORS请求仅显示6个标头:
为了通过CORS请求访问自定义标头,服务器必须将其显式列入白名单。这可以通过发送响应标头来完成:访问控制暴露标头Java:添加已公开的标头https://docs.spring.io/spring-framework/docs/4.2.x/javadoc-api/org/springframework/web/cors/CorsConfiguration.html.NET核心:带有暴露的标头https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-6.0快递JS:暴露接头https://expressjs.com/en/resources/middleware/cors.html
4bbkushb2#
Angular 12,解析文件名。
const saveAsWithServerName = (response: HttpResponse<Blob>, defaultName = 'NoName.pdf') => { const fileName = response.headers .get('content-disposition') .split(';') .map(h => h.trim()) .filter(h => h.startsWith('filename=')) .reduce(h => h.length === 1 ? h[0] : defaultName) .replace('filename=', ''); saveAs(response.body, fileName); }; this.http.post(`./api/ReportPdf`, request, {observe: 'response', responseType: 'blob'}).subscribe({ next: r => saveAsWithServerName(r) });
ha5z0ras3#
有了新的Angular Http,可以在服务代码中尝试以下操作。
downloadLink(): Observable<HttpResponse<Blob>> { return this.http.get<Blob>(this.someURL, { observe: 'response', responseType: 'blob' as 'json' }); }
并将上述内容用作
this.someService .downloadLink() .subscribe( (resp: HttpResponse<Blob>) => { console.log(resp.headers.get('content-disposition')); data = resp.body });
同样,在服务器端,需要设置以下响应头。'Access-Control-Expose-Headers': 'Content-Disposition'就像在Java Sping Boot 中一样,可以使用
'Access-Control-Expose-Headers': 'Content-Disposition'
final HttpHeaders headers = new HttpHeaders(); headers.add(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=1.xlsx"); headers.add(HttpHeaders.ACCESS_CONTROL_EXPOSE_HEADERS, HttpHeaders.CONTENT_DISPOSITION);
0dxa2lsx4#
对于那些抱怨最好的解决方案不起作用,并且只有内容类型在头中的人,您需要设置'Access-Control-Expose-Headers':服务器端的“Content-Disposition”。我正在使用asp.net核心,然后我必须执行以下操作。
app.UseCors(builder => builder.WithOrigins(originsAllowed.ToArray()) .AllowAnyMethod() .AllowAnyHeader() .WithExposedHeaders("Content-Disposition")
pbossiut5#
在Angular 中,我们可以读取文件名,如下所示,
this.http.post(URL, DATA).subscribe( (res) => { var contentDisposition = res.headers.get('content-disposition'); var filename = contentDisposition.split(';')[1].split('filename')[1].split('=')[1].trim(); console.log(filename); });
但最主要的是我们需要在API中指定Access-Control-Expose-Header,如下所示。
注意:最后一行是必填项
FileInfo file = new FileInfo(FILEPATH); HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK); response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment") { FileName = file.Name }; response.Content.Headers.Add("Access-Control-Expose-Headers", "Content-Disposition");
idfiyjo86#
您可以在这里尝试这种代码。注意:请勿使用Map
this.http.post(URL, DATA) .subscribe((res) => { var headers = res.headers; console.log(headers); //<--- Check log for content disposition var contentDisposition = headers.get('content-disposition'); });
a6b3iqyw7#
带Angular 9和表达式
需要在Express中允许此标题
res.setHeader('Access-Control-Expose-Headers', 'Content-Disposition');
Angular
this.http.get(url, { observe: 'response', responseType: 'blob' as 'json' }) .subscribe((res: any) => { console.log(res.headers.get('content-disposition')); });
pcrecxhr8#
在Angular 7中,向上投票法不起作用,您需要这样做:
const responseHeaderFilename = response.headers.get('content-disposition');
更多详细信息,请查看Angular官方文档:https://angular.io/guide/http#reading-the-full-response并确保“Content-Disposition”如@mslugx答案中所示
ybzsozfc9#
从响应头中获取文件名。
(data)=>{ //the 'data' is response of file data with responseType: ResponseContentType.Blob. let filename = data.headers.get('content-disposition').split(';')[1].split('=')[1].replace(/\"/g, '') }
9条答案
按热度按时间vlf7wbxs1#
CORS请求仅显示6个标头:
为了通过CORS请求访问自定义标头,服务器必须将其显式列入白名单。这可以通过发送响应标头来完成:访问控制暴露标头
Java:添加已公开的标头https://docs.spring.io/spring-framework/docs/4.2.x/javadoc-api/org/springframework/web/cors/CorsConfiguration.html
.NET核心:带有暴露的标头https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-6.0
快递JS:暴露接头https://expressjs.com/en/resources/middleware/cors.html
4bbkushb2#
Angular 12,解析文件名。
ha5z0ras3#
有了新的Angular Http,可以在服务代码中尝试以下操作。
并将上述内容用作
同样,在服务器端,需要设置以下响应头。
'Access-Control-Expose-Headers': 'Content-Disposition'
就像在Java Sping Boot 中一样,可以使用
0dxa2lsx4#
对于那些抱怨最好的解决方案不起作用,并且只有内容类型在头中的人,您需要设置'Access-Control-Expose-Headers':服务器端的“Content-Disposition”。我正在使用asp.net核心,然后我必须执行以下操作。
pbossiut5#
在Angular 中,我们可以读取文件名,如下所示,
但最主要的是我们需要在API中指定Access-Control-Expose-Header,如下所示。
注意:最后一行是必填项
idfiyjo86#
您可以在这里尝试这种代码。
注意:请勿使用Map
a6b3iqyw7#
带Angular 9和表达式
需要在Express中允许此标题
Angular
pcrecxhr8#
在Angular 7中,向上投票法不起作用,您需要这样做:
更多详细信息,请查看Angular官方文档:https://angular.io/guide/http#reading-the-full-response
并确保“Content-Disposition”如@mslugx答案中所示
ybzsozfc9#
从响应头中获取文件名。