Angular5アプリでPDFをレンダリングする

dave0688

Angular5アプリでPDFをレンダリングしようとしています。基本的に、ファイルストリームを取得するためにGETリクエストを送信しています(リンクなし!これは、コンプライアンスにより、このシナリオでは不可能です)。ファイルストリームにはが付属していContent-Type: application/pdfます。

今私は2つの問題があります:

まず、応答はサーバーから200で返されます(これは問題ありませんが、Angularアプリでは常にエラーが報告されます:

PDFを取得する方法は次のようになります。

  fetchPdfAjaxRequest(caseId: string) {
    this.caseListService.getPdfFileStream(caseId)
                        .takeUntil(this.ngUnsubscribe)
                        .subscribe( (res) => {
                          console.log(res);
                        },
                        (error) => {
                          this.errorService.displayError(error.status, error.statusText);
                        });
  }

私のサービス方法は次のようになります。

public getPdfFileStream(caseId: string) {
    const url = this.CASE_API_URL + '/' + caseId + '/pdf';
    let headers = new HttpHeaders();
    headers = headers.set('Accept', 'application/pdf');

    return this.httpClient.get(url, {headers: headers});
  }

ただし、200で応答しても、エラーブランチに入ります。リクエストに追加のヘッダーを設定する必要があるためでしょうか?

応答本文は単なる巨大な文字列です。

// just an excerpt from the "response" tab in Chrome dev tools
JVBERi0xLjQKMSAwIG9iago8PAovVGl0bGUgKP7/KQovQ3JlYXRvciAo/v8AdwB

次に、その文字列を解析してPDFとしてレンダリングする必要があります。

誰かが手がかりを持っていますか...-応答がサーバーから200を示しているのに、Angularのエラーブランチに入るのはなぜですか?-その巨大な文字列(blob)をPDFにレンダリングするにはどうすればよいですか?私はこのlibについて考えました(https://vadimdez.github.io/ng2-pdf-viewer/)。src属性として、URLまたはUint8Array(文字列のようなものでしょうか?)を受け取ることができます。

どんな助けでも大歓迎です:)

@更新:

最初の問題(ファイルストリームを取得しない)の解決策は、@ Zlatkoによって回答されました。

ここで、PDFをレンダリングする方法について、別の投稿を見つけて、次の解決策にたどり着きました。

let file = new Blob([pdf], { type: 'application/pdf' });            
var fileURL = URL.createObjectURL(file);
window.open(fileURL);
はちみつ

HttpClientのデフォルトのresponseTypeは「json」です。バイナリを期待するようにAngularに指示します。

return this.httpClient.get(url, { headers: headers, responseType: 'blob' });

HttpClientのドキュメントご覧ください

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

AndroidでPDFをレンダリングする方法

分類Dev

SwingアプリケーションでiTextを使用してPDFをレンダリングできますか?

分類Dev

SwingアプリケーションでHTMLをレンダリングする

分類Dev

コンポーネントを手動で再レンダリングする方法Angular5

分類Dev

同形のReactアプリでHTML文字列をレンダリングする

分類Dev

Angular2がアプリコンポーネントテンプレートを2回レンダリングするのはなぜですか

分類Dev

ビルドされたアプリでルーティングする際のAngular5の問題

分類Dev

AppEngineでAngularUniversalを使用したサーバーレンダリングを備えたAngular5アプリ

分類Dev

PubNubをAngular5にリンクして、Webアプリにデータを投稿する

分類Dev

ionic3およびangular5でレンダリングする動的タブ

分類Dev

テンプレート内の未定義の配列補間からAngular5アプリを保護する

分類Dev

Angular5アプリはIE11でレンダリングされません

分類Dev

Angular5アプリケーションでMicrosoftBot FrameworkWebチャットを使用する方法

分類Dev

Angular5の* ngIfの後に要素がレンダリングされるのを待ちますか?

分類Dev

Angular5でjqueryプラグインを使用する

分類Dev

DICOMサーバーがAngular5アプリケーションと通信できるようにヘッダーを正しく設定します

分類Dev

Angular5アプリケーションの作成これをIONIC3で再利用する方法

分類Dev

AngularマテリアルデザインAngular5でダイアログに異なる高さと幅を設定することは可能ですか?

分類Dev

Node.js(Electronアプリ)でフレームなしでPDFをレンダリングする

分類Dev

Reactアプリ内で外部Webページをレンダリングする

分類Dev

React / reduxアプリがSafariで空白の画面をレンダリングする

分類Dev

jsfフォームをPDFでレンダリングする

分類Dev

PDFをChromeでiframeとしてレンダリングする

分類Dev

HTMLまたはディレクティブなしでAngularアプリをレンダリングする

分類Dev

反応アプリでDIVをレンダリングする

分類Dev

Angular 5でPDFをレンダリングする方法は?

分類Dev

Angular5でjavaScriptTimeSheetプラグインを使用する方法

分類Dev

FlaskIMAPアプリケーションでHTMLをレンダリングする

分類Dev

Angular5はレンダリングせずにHTMLを生成します

Related 関連記事

  1. 1

    AndroidでPDFをレンダリングする方法

  2. 2

    SwingアプリケーションでiTextを使用してPDFをレンダリングできますか?

  3. 3

    SwingアプリケーションでHTMLをレンダリングする

  4. 4

    コンポーネントを手動で再レンダリングする方法Angular5

  5. 5

    同形のReactアプリでHTML文字列をレンダリングする

  6. 6

    Angular2がアプリコンポーネントテンプレートを2回レンダリングするのはなぜですか

  7. 7

    ビルドされたアプリでルーティングする際のAngular5の問題

  8. 8

    AppEngineでAngularUniversalを使用したサーバーレンダリングを備えたAngular5アプリ

  9. 9

    PubNubをAngular5にリンクして、Webアプリにデータを投稿する

  10. 10

    ionic3およびangular5でレンダリングする動的タブ

  11. 11

    テンプレート内の未定義の配列補間からAngular5アプリを保護する

  12. 12

    Angular5アプリはIE11でレンダリングされません

  13. 13

    Angular5アプリケーションでMicrosoftBot FrameworkWebチャットを使用する方法

  14. 14

    Angular5の* ngIfの後に要素がレンダリングされるのを待ちますか?

  15. 15

    Angular5でjqueryプラグインを使用する

  16. 16

    DICOMサーバーがAngular5アプリケーションと通信できるようにヘッダーを正しく設定します

  17. 17

    Angular5アプリケーションの作成これをIONIC3で再利用する方法

  18. 18

    AngularマテリアルデザインAngular5でダイアログに異なる高さと幅を設定することは可能ですか?

  19. 19

    Node.js(Electronアプリ)でフレームなしでPDFをレンダリングする

  20. 20

    Reactアプリ内で外部Webページをレンダリングする

  21. 21

    React / reduxアプリがSafariで空白の画面をレンダリングする

  22. 22

    jsfフォームをPDFでレンダリングする

  23. 23

    PDFをChromeでiframeとしてレンダリングする

  24. 24

    HTMLまたはディレクティブなしでAngularアプリをレンダリングする

  25. 25

    反応アプリでDIVをレンダリングする

  26. 26

    Angular 5でPDFをレンダリングする方法は?

  27. 27

    Angular5でjavaScriptTimeSheetプラグインを使用する方法

  28. 28

    FlaskIMAPアプリケーションでHTMLをレンダリングする

  29. 29

    Angular5はレンダリングせずにHTMLを生成します

ホットタグ

アーカイブ