如何在 angular6 中下载 xls 或 xlsx 文件（Blob API 响应）

Question

我试图下载在 API 响应中作为 blob 接收的 XLSX 文件，但它被接收为HttpErrorResponse

这是由于angular5的请求结构发生了变化。

我已经尝试过使用 HttpErrorReponse 对象响应的请求，如下所示：

myBlobRequest():Observable<any>{
return this.http.get(url, { responseType: 'blob'})
            .map((response: Response) => {
                return response;
            })
            .catch((res: Response) => {
                // handleError(response)
            });
}

Answer 1

以下解决方案对我有用。因为它在 HttpErrorResponse

中给出了 json 解析错误

解决方案：

{ responseType: 'blob'} should be replaced with { responseType: 'blob' as 'json'}

请求：

GET方法：

myBlobRequest():Observable<any>{
return this.http.get(url, { responseType: 'blob' as 'json' })
            .map((response: Response) => {
                return response;
            })
            .catch((res: Response) => {
                // handleError(response)
            });
}

回应：

在订阅者函数中处理：

• 带有文件保护程序库：

this.serviceObj.myBlobRequest.subscribe((blobResponse)=>{
            var blob = new Blob([resp], { type: 'application/vnd.openxmlformats- 
                       officedocument.spreadsheetml.sheet;' });
            FileSaver.saveAs(blob, "test.xlsx");
});

• 没有文件保护程序库：

this.serviceObj.myBlobRequest.subscribe((blobResponse)=>{
            var blob = new Blob([resp], { type: 'application/vnd.openxmlformats- 
                       officedocument.spreadsheetml.sheet;' });
            // Download File without FileSaver
            const downloadUrl = window.URL.createObjectURL(blob);
            var link = document.createElement('a');
            link.href = downloadUrl;
            link.download = "test.xlsx";
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);

});