Angular 2如何显示.pdf文件

Question

我有一个angular2应用程序,我希望用户能够在浏览器中下载和打开pdf文件.

我可以使用angular2模块或组件吗？

Answer 1

ng2-pdf-viewer工作得很好,但我想在这个页面上显示pdf:https://pdfobject.com/static.html

可悲的是,我有一个pdf流,而不是直接的pdf(链接末尾没有.pdf),如:https://***********.idshost.fr/ws/********XFER/WS /下载/ 3ca3dfa2-e89d-4f98-bcf2-55ad62bacfc6

响应就像那样(只粘贴了一部分):

%PDF-1.3%Äåòåë§óÐÄÆ40 obj <</Length 5 0 R/Filter/FlateDecode >> streamxTÍÛ6¼û)æØE[ìì89$i½=°×Ë@"μ"e}ôÉKõY:¬,]§k ©æfæwø;,÷^ @yÄQ²é>Ù£ÿ¼£1lÑ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

我听说改变内容配置为内联而不是附件使浏览器尝试打开它而不是下载,我没有访问服务器所以没有尝试过.

我的pdf不显示,获取空白视图或错误"无法加载pdf文档".(但它出于一些罕见的pdf whit <object>和<embed>,但不是<iframe>,原因不明)

finnaly设法找到有用的东西,也许它可以帮助一些人,这里是代码(angular2):

.ts文件 __CODE__

.html文件(其中任何一个都有效,iframe对我来说有更多的功能,比如打印)

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

        //somewhere...
        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
                }
            );

        }

希望对某人有所帮助!

Answer 2

您是否看过这个模块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 3

尝试这个：

<embed src="/assets/pdf/pr.pdf" 
    style="width: 100%;height: 500px" 
    type="application/pdf">

嵌入标签可以放置在模板中的任何位置。根据需要更改样式 attrs 和 src。