Выполнение запроса POST, возвращающего PDF-файл, с использованием HttpClient от Angular - PullRequest
Новая
       39

Выполнение запроса POST, возвращающего PDF-файл, с использованием HttpClient от Angular

0 голосов
/ 11 декабря 2018

Я работаю со службой веб-API ( DocRaptor ), которая возвращает PDF в качестве ответа.Первоначально работая с API, я смог создать PDF-файл и просмотреть его на своем сайте.Я получил 200 кодов статуса, говорящих мне, что ответ был успешным.Тем не менее, результат сообщения все еще возвращался как ошибка на угловой стороне с использованием этого кода: 

    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")));

ОБНОВЛЕНИЕ:

Я заново пересмотрел свой код, как предложено в ответах здесь.Тем не менее, я все еще получаю исходную ошибку, которая заключается в том, что я возвращаю 200 Status из DocRaptor API, но HttpClient от Angular не анализирует ответ как PDF.Я добавил в заголовки, чтобы принять PDF, и все еще получаю сообщение об ошибке «Неожиданный токен% в JSON в позиции 0».

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)
        )
      );
  }

Ответы [ 2 ]

0 голосов
/ 10 февраля 2019

У меня также была аналогичная потребность, когда мой Api возвращал объект файла PDF.Сначала я попытался передать объект заголовков с «Accept», установленным как «Accept»: «application / pdf».Но это не сработало.

Затем я просто установил "responseType" в httpOptions как:

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

, и это сработало.

0 голосов
/ 11 декабря 2018 
 .pipe(tap(data => this.downloadFile(data, "application/pdf")));

Вы должны subscribe до Observable, прежде чем он что-то сделает.Пример Angular возвращает Observable с присоединенным к нему оператором tap.Ваш собственный пример возвращает Subscription, который бесполезен для всего, что вызывает ваш метод.

Это рекомендуемый шаблон проектирования для сервисов Angular;служба создает Observable, который похож на контракт на поток работы и преобразование данных, после чего вызывающая сторона может subscribe получить его и получить результат работы.

...