Question

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

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

Answer 1

ng2-pdf-viewer工作得很好，但我希望在此页面上显示pdf：https://pdfobject.com/static.html

可悲的是，我有一个pdf流，而不是直接的pdf（链接末尾没有.pdf）喜欢：https：//***********.idshost.fr/ws/********xfer/ws/download/3ca3dfa2-e89d-4f98-bcf2-55ad62bacfc6

响应就像那样（只粘贴了一部分）：

％PDF-1.3％Äåòåë§óÐÄÆ40 obj＆lt;＆lt; /长度5 0 R /滤波器/ FlateDecode＆gt;＆gt; 流 xTÍÛ6¼û）æœ[²ì89$i½=°×E @ “μ” E}ôÉKõY：¬，]§k©ùfæwø;，÷^ @yÄQ²é＆GT;Ù££ÿ¼â1升 ¶Ñj-âTßâ1üJ，＆gt;Ãæ{Ü©|| 6 @¢

像这样的whit标头

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＆lt; object＆gt;和＆lt; embed＆gt;，但不是＆lt; iframe＆gt;因为不明原因）

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
            }
        );

    }

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对我来说有更多的功能，比如打印）

希望对某人有所帮助！

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

如果您希望PDF查看器具有优雅的工具栏，请使用ngx-extended-pdf-viewer。它具有所有必需的选项，例如打印，下载，页面导航等。

如何使用该库：

使用npm i ngx-extended-pdf-viewer --save安装库
将以下脚本添加到您的angular.json

"scripts": [ "node_modules/ngx-extended-pdf-viewer/assets/pdf.js", "node_modules/ngx-extended-pdf-viewer/assets/pdf.worker.js", "node_modules/ngx-extended-pdf-viewer/assets/viewer.js" ]
在模块文件的导入部分中添加“ NgxExtendedPdfViewerModule”
像这样在您的组件中显示它：

<ngx-extended-pdf-viewer src="'assets/example.pdf'" useBrowserLocale="false"> </ngx-extended-pdf-viewer>

Answer 4

试试这个。请使用您的实际路径和文件名更改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 5

尝试 ng2-pdfjs-viewer （https://www.npmjs.com/package/ng2-pdfjs-viewer）。恕我直言，到目前为止，它被证明是最简单，最可靠的使用方法-同时构建了pdf密集型应用程序。您可以获得完整的图形查看器和许多其他功能-打印预览，自动下载，在新选项卡中打开，缩放，滚动，转到页面/命名的目标，旋转文档等。它可与pdf流和物理pdf文件一起使用。如果您是围绕通过angular上的Web浏览器提供pdf进行构建的；这个软件包很有帮助。

安装
$ npm install ng2-pdfjs-viewer --save
添加到应用模块

import { PdfJsViewerModule } from 'ng2-pdfjs-viewer'; // <-- Import PdfJsViewerModule module

@NgModule({
  imports: [
    PdfJsViewerModule // <-- Add to declarations
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

使用它。
<ng2-pdfjs-viewer pdfSrc="mydoc.pdf"></ng2-pdfjs-viewer>

Answer 6

您可以使用用于Angular的文件查看器程序包。

此软件包支持 pdf ， png ， jpeg 和 mp4 格式。

安装：

npm i @taldor-ltd/angular-file-viewer ng2-pdf-viewer

用法：

在模块的导入中添加 AngularFileViewerModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AngularFileViewerModule } from '@taldor-ltd/angular-file-viewer';

import { AppComponent } from './app/app.component';

@NgModule({
  imports: [BrowserModule, AngularFileViewerModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})

class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

然后在组件中使用它

（PDF样本）

import { Component } from '@angular/core';

import { FileMimeType } from '@taldor-ltd/angular-file-viewer';

@Component({
  selector: 'app-root',
  template: `
    <tld-file-viewer [src]="src" [type]="type"></tld-file-viewer>
  `
})
export class AppComponent {
  src = 'http://www.africau.edu/images/default/sample.pdf';
  type = FileMimeType.PDF;
}

To read more

Answer 7

它对我有用。我的错误是将responseType:ResponseContentType.ArrayBuffer放在标题中，而不在其中：

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

Answer 8

尝试一下：

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

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

Answer 9

如果要显示64位pdf，可以使用我的组件https://www.npmjs.com/package/ng2-image-viewer

它可以与angular 2+一起使用，并且可以呈现Base 64图像，URL图像和Base 64 PDF，它易于实现，您只需要：

1）运行npm install ng2-image-viewer --save

2）在您的angular-cli.json文件中添加以下代码：

"styles": [
     "../node_modules/ng2-image-viewer/imageviewer.scss"
],
"scripts": [
     "../node_modules/ng2-image-viewer/imageviewer.js"
],

3）导入ImageViewerModule

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify your library as an import
    ImageViewerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4）现在，您可以根据需要使用它：

<!-- You can now use your library component in app.component.html -->
<h1>
  Image Viewer
</h1>
<app-image-viewer [images]="['iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==', 'https://picsum.photos/900/500/?random']"
[idContainer]="'idOnHTML'"
[loadOnInit]="true"></app-image-viewer>

这是它的演示Ng2-Image-Viewer Showcase

有关更多信息，您可以检查上面的链接：）

Angular 2如何显示.pdf文件

9 个答案: