Angular 2如何显示.pdf文件

Question

我是angular2中的新成员。

我有我想要显示在弹出窗口的开放时间是他们的任何angular2模块，或者，我可以使用，以显示该PDF文件组件PDF文件。

谢谢。

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

尝试。 请与您的实际路径和文件名

<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查看器做工相当不错的改变filename.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¼û）æœ[²ì89$i½=°×E @ “μ” E} ôÉKõY：¬，]§k©ùfæwø;，÷^ @yÄQ²é>Ù££ÿ¼â1升 ¶Ñj-âTßâ1üJ，> A自动{Ü©|Ô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 

我听说，改变内容处置内联，而不是附着使浏览ř尝试打开它而不是下载，我没有访问服务器，所以没有尝试。

我的PDF不会显示，获得空白视图，或错误“无法加载 PDF文档”。 （但它的工作在某些罕见的PDF丝毫<对象>和<嵌入>，但不<IFRAME>为不明原因）

finnaly设法找到工作，也许帮助一些人的东西，这里是代码（angular2 ）：

的.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 
}