发出一个POST请求，使用Angular的HttpClient返回PDF。

我正在使用一个web API服务(DocRaptor(，该服务返回PDF作为响应。在最初使用API时，我能够生成一个PDF并在他们的网站上查看该PDF。我收到一个200状态代码，告诉我响应成功。然而，帖子的结果仍然被返回为Angular方面的错误，使用了以下代码：

return this.http
.post("https://docraptor.com/docs", {
headers: {
"Content-Type": "application/json"
},
user_credentials: "WEB_API_KEY",
doc: {
test: true,
name: "testDocument.pdf",
document_content: documentContent,
type: "pdf"
}
})
.subscribe(
res => {
console.log(res);
},
err => {
console.log("Error occured: " + err);
}
);

我假设这是因为代码期望JSON作为结果，而API返回了PDF。

Angular关于请求非JSON数据的文档没有详细介绍如何使用HttpClient使用响应(DocRaptor也没有(。调试时，我无法使用下面的代码(使用Chrome中的"网络"选项卡(判断API调用是否正在发送或返回响应。这可能是下面语法中的一个问题，但下面的代码是我尝试使用我知道可用的文档的一种方法：

return this.http
.post("https://docraptor.com/docs", {
responseType: "blob",
headers: {
"Content-Type": "application/json",
Accept: "application/pdf"
},
user_credentials: "WEB_API_KEY",
doc: {
test: true,
name: "testDocument.pdf",
document_content: documentContent,
type: "pdf"
}
})
.pipe(tap(data => this.downloadFile(data, "application/pdf")));

更新：

我已经按照这里的回复中的建议重新编排了我的代码。然而，我仍然收到最初的错误，即我从DocRaptor API返回200状态，但Angular的HttpClient没有将响应解析为PDF。我在标题中添加了接受PDF的内容，但仍然收到一条错误消息，"位置0处JSON中的意外令牌%"。

复制组件.ts

generatePdf() {
var htmlCard = this.cards.filter((card: Card) => card.language === "html")[0];
var cssCard = this.cards.filter((card: Card) => card.language === "css")[0];
var documentContent = this.generateCode(
htmlCard.editorContent,
cssCard.editorContent
);
this.docRaptorService.generatePdf(documentContent).subscribe(results => {
let blob = results;
let filename = "testDocument.pdf";
FileSaver.saveAs(blob, filename);
});
}

doc raptor.service.ts

generatePdf(documentContent: string) {
return this.http
.post("https://docraptor.com/docs", {
headers: {
"Content-Type": "application/json",
Accept: "application/pdf"
},
user_credentials: "WEB_API_KEY",
doc: {
test: true,
name: "testDocument.pdf",
document_content: documentContent,
type: "pdf"
},
responseType: "blob"
})
.pipe(
tap(
data => console.log(documentContent, data),
error => console.log(documentContent, error)
)
);
}