无法在Angular4中查看'Content-Disposition'头部GET回复

我正尝试在我的Angular应用中下载pdf文件。服务器（JBoss的）供应以无法在Angular4中查看'Content-Disposition'头部GET回复

Content-type : application/pdf and Content- Disposition

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

进行GET调用时。我做的：

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

    //Cant find headers in file here 

});`

我也试过的responseType设置为RequestContentType.Blob，它要么没有区别。

对于我的下载实现，我有一段代码一直工作给我下载附件与AngularJS。我只在这里努力阅读Content-Disposition标题。

我也尝试设置{ observe : response }，期待以这种方式得到详细的回复。但是，由于某些原因，在GET options中不允许设置该属性。

我见过很多关于SO的答案，并尝试了其中的大部分，但仍无法获得标题。

P.S：直接在浏览器上打开API会让我下载文件，这意味着我的Java代码很好，这让我想知道我的代码上面有什么问题。

请求建议。

来源

2017-08-26 Saurabh Tiwari

在Evans建议的Access-Control-Expose-Headers和setExposedHeaders的帮助下，我可以实现文件下载如下。

在Java代码中，你需要暴露Access-Control-Expose-Headers，可以使用CORS完成此操作：

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

这将会使服务器响应所需的头。

在你的客户，你可以处理使用下面的代码的确切回应：

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，我在一个地方写的一切。您可能想要模块化各种回调。

希望有一天能帮助别人。

来源

2017-08-28 13:35:52

HI可以尝试这样

我们需要这个包的文件保护程序，安装像“NPM安装文件金丹--save”，那么你可以尝试

public downloadCSVFile(){ 
this.downloadPdf().subscribe(
    (res) => {  
     saveAs(res,'test.pdf') 
    } 
); 
} 

public downloadPdf(): any { 
    let url='your url' 
    let headers = new Headers(); 
    headers.append('Authorization', 'JWT ' + localStorage.getItem('id_token')); 
    return this.http.get(url,{ headers: headers,responseType: ResponseContentType.Blob }).map(
    (res) => { 
     return new Blob([res.blob()], { type: 'application/pdf' }) 
    }) 


    }

你需要暴露从备份（JBoss服务器）的“内容 - 处置”头

来源

2017-08-26 07:23:01 Robert

谢谢@罗伯特，虽然我不是在寻找一个外部模块来实现它。我发布了帮助我的案例的代码。 –

好超级@SaurabhTiwari – Robert

有关您的服务器发送任何自定义标题是在角（或任何其他Web应用程序）访问它必须存在于Access-Control-Expose-Headers否则你浏览器不会将它传递给您的Angular App，即使您的开发人员工具显示它，您也无法检索它。

来源

2017-08-26 23:13:35

我正在做这个在Java中，我有以下头设置为我的CORS的一部分： corsFilter.setAllowedHeaders（“Content-Type，Access-Control-Allow-Headers，Access-Control-Expose-标题，内容处理，内容长度，授权，X请求 - 与“）;'是否有任何其他方式，你建议。 –

如果仔细查看代码，您会注意到您只设置了“Access-Control-Allow-Headers”，并且包含“Access-Control-Expose-Headers”作为允许的标题的一部分。我不知道这是如何在Java中完成的，但我认为你应该也有类似'corsFilter.setExposedHeaders（“custom header，customer，header”） –

我添加了'corsFilter.setExposedHeaders（“Content-Disposition，Content-Type” ）;'到我现有的代码。这可以下载文件。然而，令人惊讶的是，如果你点击下载的文件，它只是给出一个弹出窗口说：“加载PDF文档失败。”这是否很熟悉？ –

无法在Angular4中查看'Content-Disposition'头部GET回复

回答

相关问题