在Angular 5中，我如何强制下载从经过身份验证的API检索的PDF

Question

我有一个使用身份验证的API端点。 该端点是GET端点，但是我不能简单地将其加载到浏览器中，因为该端点正在标头中查找身份验证令牌。 所以。 为了从端点获取数据，我创建了一个服务（该服务使用httpClient对象的扩展名，该扩展名会自动放入适当的身份验证标头中。这就是我的服务调用的外观（简化）：

getReceipt(): Observable<any> {
    return this.http.get('the/url', {responseType: 'text'});
}

这就是我在组件中进行调用时的样子：

this.myService.getReceipt().subscribe(data => {
    console.log('receipt data');
    console.log(data);
});

因此，一切正常，但是我无法弄清楚下一步是如何实际下载pdf文件。 注意：我在控制台中登录的“收据数据”如下所示：

%PDF-1.3
%����
1 0 obj
<</Author <> /Creator (cairo 1.14.6 (http://cairographics.org))
  /Keywords <> /Producer (WeasyPrint 0.42 \(http://weasyprint.org/\))
  /Title (Receipt)>>
endobj...

我不知道这是什么格式，但我猜测这是原始格式的pdf数据。 如何强制将此数据下载？

还要注意，我已经搜索了很多关于SO的文章，并尝试了一些方法。 以下是我尝试过的几乎有效的方法：

var link = document.createElement('a');
link.href = 'the/url';
link.download = 'file.pdf';
link.dispatchEvent(new MouseEvent('click'));

这样做是强制下载，但是因为令牌没有正确显示在标头中，所以我得到的只是来自后端的消息，提示“无效令牌”，而不是我的实际pdf。

有任何想法吗？

Answer 1

您使用不正确的responseType返回PDF文档。 在您的情况下，应为responseType: 'blob' 。 因此，您的http调用应如下所示-

getReceipt(): Observable<any> {
    return this.http.get('the/url', {responseType: 'blob'});
}