无法在Angular4 GET响应中查看"Content-Disposition"标题 [英] Unable to view 'Content-Disposition' headers in Angular4 GET response

问题描述

我正在尝试在Angular应用中下载pdf文件.服务器(JBoss)为文件提供服务

I am trying to download a pdf file in my Angular app. The server (JBoss) serves a file with

内容类型:应用程序/pdf和内容处置

标题设置为附件.我可以在提琴手的响应中很好地看到这些标题.但是，在我的订阅回调中，我看不到相同的标题.相反，标头包含两个属性，即: _headers和_normalizedHeaders

header set to attachment. I can see these headers quite well in fiddler response. However in my subscribe callback I can't see the same headers. Instead the header contains two property namely: _headers and _normalizedHeaders

在进行GET调用时.我这样做:

While making the GET call. I do:

`this._http.get(url, {responseType: 'arraybuffer'}).subscribe((file: Response)=>{

    //Cant find headers in file here

});`

我也尝试将responseType设置为 RequestContentType.Blob ，并且也没有任何区别.

Also I tried setting responseType to RequestContentType.Blob and it made no difference either.

对于我的下载实现，我有一段代码一直可以帮助我使用AngularJS下载附件.我只是在这里努力阅读 Content-Disposition 标头.

For my download implementation I have a piece of code that has always worked for me to download the attachment with AngularJS. I am only struggling here to read Content-Disposition header.

我还尝试设置 {observe:response} ，希望以此方式获得详细的响应.但是，由于某些原因，在GET 选项中不允许设置该属性.

I also tried setting { observe : response }, expecting to get a detailed response that way. However, for some reasons setting that property is not allowed in GET options.

我已经看到许多关于SO的答案，并尝试了大多数答案，但是仍然无法获取标题.

I have seen many answer on SO and tried most of them, but still not able to get the header.

P.S:直接在浏览器上点击API可以下载我的文件，这意味着我的Java代码很好，这让我怀疑上面的代码有什么问题.

P.S : Hitting the API directly on the browser gets me the file downloaded which means my Java code is fine and that makes me wonder what is wrong with my code above.

请求建议.

推荐答案

借助Evans建议的 Access-Control-Expose-Headers 和 setExposedHeaders ，我可以完成文件下载，如下所示.

With the help of Access-Control-Expose-Headers and setExposedHeaders suggested by Evans, I could achieve the file download as below.

在Java代码中，您需要公开 Access-Control-Expose-Headers ，可以使用CORS以如下方式完成该操作:

In your Java code, you need to expose the Access-Control-Expose-Headers, which can be done using CORS as :

    CorsFilter corsFilter = new CorsFilter();
    corsFilter.setAllowedHeaders("Content-Type, Access-Control-Allow-Headers, Access-Control-Expose-Headers, Content-Disposition, 
    Authorization, X-Requested-With");
    corsFilter.setExposedHeaders("Content-Disposition");

这将在服务器响应中公开所需的标头.

This will expose the required headers in the server response.

在您的客户端上，您可以使用以下确切的代码来处理响应:

On your client, you can handle the response using the exact below code:

    private processDownloadFile() {
              const fileUrl = this._downloadUrl;
              this.http.get(fileUrl, ResponseContentType.ArrayBuffer).subscribe( (data: any) => {
                const blob = new Blob([data._body], { type: data.headers.get('Content-Type')});
                const contentDispositionHeader = data.headers.get('Content-Disposition');
                if (contentDispositionHeader !== null) {
                    const contentDispositionHeaderResult = contentDispositionHeader.split(';')[1].trim().split('=')[1];
                    const contentDispositionFileName = contentDispositionHeaderResult.replace(/"/g, '');
                    const downloadlink = document.createElement('a');
                    downloadlink.href = window.URL.createObjectURL(blob);
                    downloadlink.download = contentDispositionFileName;
                    if (window.navigator.msSaveOrOpenBlob) {
                        window.navigator.msSaveBlob(blob, contentDispositionFileName);
                    } else {
                        downloadlink.click();
                    }
                }
              });
    }   

当然，我将所有内容都写在一个地方.您可能要模块化各种回调.

Ofcourse, I wrote everything at one place. You might want to modularize various callbacks.

希望有一天能对某人有所帮助.

Hope it helps someone someday.

这篇关于无法在Angular4 GET响应中查看"Content-Disposition"标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！