使用Angular的HttpClient发出返回PDF的POST请求

Question

我正在使用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。

关于如何使用HttpClient消费响应的Angular关于Requesting non-JSON Data的文档没有详细说明（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中出现意外的令牌％”。

repl.component.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)
        )
      );
  }

Answer 1

 .pipe(tap(data => this.downloadFile(data, "application/pdf")));

你必须subscribe到Observable才能做任何事情。 Angular示例返回Observable，并附带一个tap运算符'附加'。你自己的例子是返回Subscription，这对任何调用你方法的东西都没用。

这是Angular服务的推荐设计模式;该服务创建Observable，这就像工作和数据转换流的合同，然后调用者可以subscribe到它并获得工作的结果。

Answer 2

我也有类似的需求，我的Api返回了一个Pdf文件对象。我首先尝试传递header对象，将“Accept”设置为“Accept”：“application / pdf”。但那没用。

然后我只需在httpOptions中设置“responseType”：

this._httpClient.post(apiUrl, filterParams, { responseType: 'blob' });

它起作用了。