title: Making a POST request that returns a PDF using Angular's HttpClient
body: <p>I am working with a web API service (<a href="https://docraptor.com/documentation/node" rel="nofollow noreferrer">DocRaptor</a>) that returns a PDF as the response. While initially working with the API, I was able generate a PDF and view the PDF on their site. I received a 200 Status Code telling me that the response was successful. However, the result of the post was still returned as an error on the Angular side using this code:</p>
  
  <pre><code>    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 =&gt; {
        console.log(res);
      },
      err =&gt; {
        console.log("Error occured: " + err);
      }
    );
  </code></pre>
  
  <p>I am assuming this is because the code was expecting JSON as a result, and instead the API returned a PDF.</p>
  
  <p>Angular's documentation on <a href="https://angular.io/guide/http#requesting-non-json-data" rel="nofollow noreferrer">Requesting non-JSON Data</a> does not go into enough detail on how to consume the response using the HttpClient (and neither does DocRaptor's for that matter). When debugging, I can't tell (using the Network tab in Chrome) that the API call is even being sent, or a response returned, using the code below. This is likely a problem in the syntax below, but the following code is an approach I've tried using the documentation I know that's available:</p>
  
  <pre><code>   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 =&gt; this.downloadFile(data, "application/pdf")));
  </code></pre>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I have rearchitected my code as suggested in the responses here. However, I am still receiving the original error, which is that I'm getting a 200 Status back from DocRaptor API, but Angular's HttpClient isn't parsing the response as a PDF. I've added in the headers to accept a PDF, and I still receive an error message that "Unexpected token % in JSON at position 0".</p>
  
  <p><strong>repl.component.ts</strong></p>
  
  <pre><code>  generatePdf() {
      var htmlCard = this.cards.filter((card: Card) =&gt; card.language === "html")[0];
      var cssCard = this.cards.filter((card: Card) =&gt; card.language === "css")[0];
  
      var documentContent = this.generateCode(
        htmlCard.editorContent,
        cssCard.editorContent
      );
  
      this.docRaptorService.generatePdf(documentContent).subscribe(results =&gt; {
        let blob = results;
        let filename = "testDocument.pdf";
        FileSaver.saveAs(blob, filename);
      });
    }
  </code></pre>
  
  <p><strong>doc-raptor.service.ts</strong></p>
  
  <pre><code>  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 =&gt; console.log(documentContent, data),
            error =&gt; console.log(documentContent, error)
          )
        );
    }
  </code></pre>