web-dev-qa-db-ja.com

PDF Blobはコンテンツを表示していません、Angular 2

私はこれに非常に類似した問題を抱えています PDF Blob-コンテンツが表示されないポップアップウィンドウ 、しかし、私はAngular 2.を使用しています、しかし、Angular 2では動作しません。エラーは、タイプRequestOptionsArgsにreponseTypeが存在しないことです。私はBrowserXhrで拡張しようとしましたが、まだ動作しません（ https： //github.com/angular/http/issues/8 ）。

私のコードは：

createPDF(customerServiceId: string) {
   console.log("Sending GET on " + this.getPDFUrl + "/" + customerServiceId);

   this._http.get(this.getPDFUrl + '/' + customerServiceId).subscribe(
       (data) => {
            this.handleResponse(data);
         });
}

そして、handleResponseメソッド：

handleResponse(data: any) {
     console.log("[Receipt service] GET PDF byte array " + JSON.stringify(data));

     var file = new Blob([data._body], { type: 'application/pdf' });            
     var fileURL = URL.createObjectURL(file);
     window.open(fileURL);
 }

FileSaver.jsからsaveAsメソッドも試しましたが、同じ問題です。pdfが開きますが、コンテンツは表示されません。ありがとう

pdfangularbytearrayblob
13
Loutocký

PDFのコンテンツのダウンロードと表示に多くの問題がありました。おそらく1〜2日で修正するのに無駄だったので、正常にダウンロードする方法の実例を投稿しますPDFまたは開く新しいタブで：

myService.ts

downloadPDF(): any {
        return this._http.get(url, { responseType: ResponseContentType.Blob }).map(
        (res) => {
            return new Blob([res.blob()], { type: 'application/pdf' })
        }
}

myComponent.ts

this.myService.downloadPDF().subscribe(
        (res) => {
            saveAs(res, "myPDF.pdf"); //if you want to save it - you need file-saver for this : https://www.npmjs.com/package/file-saver

        var fileURL = URL.createObjectURL(res);
        window.open(fileURL); / if you want to open it in new tab

        }
    );

[〜＃〜] note [〜＃〜]

Httpクラスを拡張してheadersをすべてのリクエストなどに追加する場合、ダウンロードの問題が発生する可能性があることにも言及する価値がありますPDF = RequestOptionsをオーバーライドします。これはresponseType: ResponseContentType.Blobを追加する場所であり、これによりThe request body isn't either a blob or an array bufferエラーが発生します。

59
Stefan Svrkota

アンギュラー5

私はそれで数日失った同じ問題を抱えていました。

ここで私の答えは他の人を助けるかもしれません、それはpdfをレンダリングするのを助けました。

私にとっては、responseType： 'arraybuffer'として言及しても、それを取ることができませんでした。

そのためには、responseTypeとして言及する必要があります： 'json'として 'arraybuffer'。（ Reference ）

作業コード

downloadPDF(): any {
    return this._http.get(url, {  responseType: 'blob' as 'json' }).subscribe((res) => {
        var file = new Blob([res], { type: 'application/pdf' });            
        var fileURL = URL.createObjectURL(file);
        window.open(fileURL);
    }
}

以下のリンクから参照

https://github.com/angular/angular/issues/18586

1
MPPNBD

ああ、文字列の最後に変数を追加することでファイル名を変更できます。そのためsaveAs(res, "myPDF.pdf");

になる

saveAs(res, "myPDF_"+someVariable+".pdf");

someVariableはカウンターであるか、個人的なお気に入りの日付時刻文字列です。

0
Ken