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]
コメントを追加