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

Question

我有一个使用身份验证的 API 端点。端点是一个 GET 端点，但是我不能简单地将它加载到浏览器中，因为端点正在 header 中寻找身份验证 token 。所以。为了从端点获取数据，我创建了一个服务(它使用自动放入正确身份验证 header 的 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'));

这样做是强制下载，但是因为 header 中的 token 不正确，所以我得到的只是来自后端的消息“无效 token ”，而不是我的实际 pdf。

有什么想法吗？

Answer 1

您使用不正确的 responseType 返回 PDF 文档。它应该是responseType: 'blob' 在你的情况下。所以你的 http 调用应该如下所示 -

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