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。

Angular在Requesting non-JSON Data上的文档没有足够详细地介绍如何使用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中的意外令牌％”。

repli.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文件对象时，我也有类似的需求。我首先尝试通过将“ Accept”设置为“ Accept”：“ application / pdf”的标头对象传递。但这没用。

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

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

它奏效了。

进行POST请求以使用Angular的HttpClient返回PDF

2 个答案: