繁体   English   中英

"如何从服务器响应角度 2 中读取内容处置标头"

[英]how to read content-disposition headers from server response angular 2

我无法找到如何从 angular 2 文档中的内容配置中读取文件名。 有人可以指导从服务器读取 Angular 2内容标头<\/a>中的标头吗

"

使用新的 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 Spring Boot 中一样,可以使用

    final HttpHeaders headers = new HttpHeaders();
    headers.add(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=1.xlsx");
    headers.add(HttpHeaders.ACCESS_CONTROL_EXPOSE_HEADERS, HttpHeaders.CONTENT_DISPOSITION);

对于那些抱怨最佳解决方案不起作用并且标题中只有内容类型的人,您需要设置 'Access-Control-Expose-Headers': 'Content-Disposition' ON SERVER SIDE。 我正在使用 asp.net core,然后我必须执行以下操作。

app.UseCors(builder =>
                builder.WithOrigins(originsAllowed.ToArray())
                    .AllowAnyMethod()
                    .AllowAnyHeader()
                    .WithExposedHeaders("Content-Disposition")

你可以在这里尝试这种代码。

注意:不要使用地图

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');
});

在 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");

使用 Angular 9 和 Expresss

需要在 Express 中允许此标头

res.setHeader('Access-Control-Expose-Headers', 'Content-Disposition');

this.http.get(url, { observe: 'response', responseType: 'blob' as 'json' })
.subscribe((res: any) => {
    console.log(res.headers.get('content-disposition'));
});

在 Angular 7 中,up-voted 方法不起作用,你需要这样做:

const responseHeaderFilename = response.headers.get('content-disposition');

请查找 Angular 官方文档以获取更多详细信息: https : //angular.io/guide/http#reading-the-full-response

并确保“Content-Disposition”像@mslugx 回答一样公开

从响应头中获取文件名。

(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, '')
}

(文件在浏览器中以二进制格式保存。文件名在客户端的 Network/header/Content-Disposition 中,我们需要获取文件名)

In Server-side code:
node js code-
    response.setHeader('Access-Control-Expose-Headers','Content-Disposition');
    response.download(outputpath,fileName);   

In client-side code:
1)appComponent.ts file
import { HttpHeaders } from '@angular/common/http';
this.reportscomponentservice.getReportsDownload(this.myArr).subscribe((event: any) => {
 var contentDispositionData= event.headers.get('content-disposition');
 let filename = contentDispositionData.split(";")[1].split("=")[1].split('"')[1].trim()
 saveAs(event.body, filename); 
});

2) service.ts file
import { HttpClient, HttpResponse } from '@angular/common/http';
getReportsDownload(myArr): Observable<HttpResponse<Blob>> {
 console.log('Service Page', myArr);
 return this.http.post(PowerSimEndPoints.GET_DOWNLOAD_DATA.PROD, myArr, {
  observe: 'response',
  responseType: 'blob'
 });
}

CORS 请求仅公开 6 个标头:

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM