角度2表示方法.pdfファイル

Question

私はangular2で新しいです。

ポップアップの開いている時間に表示したいPDFファイルは、PDFファイルを表示するために使用できるangle2モジュールまたはコンポーネントです。

ありがとうございました。

Answer 1

あなたはこのモジュールを見ましたか？https://www.npmjs.com/package/ng2-pdf-viewer？

はそう

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 

import { PdfViewerComponent } from 'ng2-pdf-viewer'; 
import { AppComponent } from './app.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    PdfViewerComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Answer 2

はこれを試すようにモジュールでそれを宣言することを忘れないでください。 かなり良いあなたの実際のパスとファイル名を持つfilename.pdf

<object data="filename.pdf" width="100%" height="100%" type='application/pdf'> 
    <p>Sorry, the PDF couldn't be displayed :(</p> 
    <a href="filename.pdf" target="_blank">Click Here</a> 
</object> 

Answer 3

NG2-PDFビューアの仕事を変更する、しかし、私は、このページのようなPDFファイルの表示を望んでください：悲しいことhttps://pdfobject.com/static.html

、私はPDFファイルを持っていましたストリームではなく、直接PDF（リンクの最後に.pdfなし） のように：https：//***********.idshost.fr/ws/******** * xfer/ws/download/3ca3dfa2-e89d-4f98-bcf2-55ad62bacfc6

レスポンスはそのようでした（貼り付け部分のみ）：

% PDF-1.3％Äåòåë§óÐÄÆ4 0 OBJ < < /長さ5 0 R /フィルタ/ FlateDecode >> ストリームxTÍÛ6¼û）æØE[²ì89$i½=°、E×@ "μ" E} ôÉKõY：¬、】§k©ùfæwø;÷^ @yÄQ²é>Ù£ÿ¼â£1リットル ¶Ñj-âTßâ1üJ、>○æ{Ü©|Ô6@その

等

聖霊降臨祭ヘッダ¢

HTTP/1.1 200 OK 
Date: Fri, 05 May 2017 11:00:32 GMT 
Server: Apache-Coyote/1.1 
Content-Disposition: attachment; filename="1/B_FILENAME*****.pdf" 
Content-Type: application/pdf 
Content-Length: 34723 
Keep-Alive: timeout=5, max=96 
Connection: Keep-Alive 

私は、コンテンツの配置を添付ファイルの代わりにインラインに変更すると、ブラウズrをダウンロードする代わりにそれを開こうとすると、私はサーバーにアクセスできないので、試していません。

私のpdfは表示されず、空白の表示が表示されませんでした。またはエラー " pdfドキュメントの読み込みに失敗しました"というエラーが表示されます。

はfinnaly多分それは一部の人々を助ける、働く何かを見つけることができ、ここでのコード（angular2がある（それは<オブジェクト>と<はunknow理由<のiframe >を>を埋め込むことではなく、いくつかのまれなPDF聖霊降臨祭で働いていました） ）：

.TSは、これらのいずれかが動作（

import {DomSanitizer,SafeResourceUrl} from '@angular/platform-browser' 
import {Headers} from "@angular/http/src/headers"; 
import {ResponseContentType} from "@angular/http/index"; 

    //somewhere is the code 
    this.getConsultationDocumentPDF(this.inputDataFile.hash).subscribe(
        (data:any) => { // data type is Response, but since _body is private field i changed it to any 

         var file3 = new Blob([data._body], {type: 'application/pdf'}); 
         this.dataLocalUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(file3)); 


        }, 
        error => { 
         console.log(error); 
        } 
       ); 

    public getConsultationDocumentPDF (pHash:string):Observable<Response> { 
     return this.http.get(
      "https://***********.idshost.fr/ws/********xfer/ws/download/"+pHash, 
      { 
       headers: new Headers({ 
        "Access-Control-Allow-Origin": "*", 
        "Authorization": "Bearer " 
       }), 
       responseType:ResponseContentType.ArrayBuffer // YOU NEED THAT 
      } 
     ); 

    } 

の.htmlファイルをファイル、IFRAMEは印刷のように、私のためのより多くのfonctionnalityを持っている）

<div *ngIf="dataLocalUrl != undefined"> 
    <h5>iframe whit local url</h5> 
    <iframe width="500" height="600" [attr.src]="dataLocalUrl" type="application/pdf"></iframe> 
    <h5>object whit local url</h5> 
    <object [attr.data]="dataLocalUrl" type="application/pdf" width="100%" height="100%"></object> 
    <h5>embed whit local url</h5> 
    <embed [attr.src]="dataLocalUrl" type="application/pdf" width="100%" height="100%"> 
</div> 

誰かを助けてくれることを願っています！

Answer 4

私のために働く。私のエラーがヘッダにresponseType:ResponseContentType.ArrayBufferを入れていた、それはそれの内側ではありません。

{ 
    headers: new Headers({ 
     "Access-Control-Allow-Origin": "*", 
     "Authorization": "Bearer " 
    }), 
    responseType:ResponseContentType.ArrayBuffer // YOU NEED THIS LINE 
}