当前位置: 首页 > 软件库 > Web应用开发 > Web框架 >

ng2-pdf-viewer

📄 PDF Viewer Component for Angular 5+
授权协议 MIT License
开发语言 JavaScript
所属分类 Web应用开发、 Web框架
软件类型 开源软件
地区 不详
投 递 者 姜博
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

Angular 5+ PDF Viewer

PDF Viewer Component for Angular 5+

Demo page

https://vadimdez.github.io/ng2-pdf-viewer/

Stackblitz Example

https://stackblitz.com/edit/ng2-pdf-viewer

Blog post

https://medium.com/@vadimdez/render-pdf-in-angular-4-927e31da9c76

Overview

Install

npm install ng2-pdf-viewer --save

Note: For angular 4 or less use version 3.0.8

Usage

In case you're using systemjs see configuration here.

Add PdfViewerModule to your module's imports

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

import { PdfViewerModule } from 'ng2-pdf-viewer';

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

class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);

And then use it in your component

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

@Component({
  selector: 'example-app',
  template: `
  <pdf-viewer [src]="pdfSrc"
              [render-text]="true"
              style="display: block;"
  ></pdf-viewer>
  `
})
export class AppComponent {
  pdfSrc = "https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf";
}

Options

[src]

Property Type Required
[src] string, object, UInt8Array Required

Pass pdf location

[src]="'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf'"

For more control you can pass options object to [src]. See other attributes for the object here.

Options object for loading protected PDF would be:

{
 url: 'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf',
 withCredentials: true
}

[page]

Property Type Required
[page] or [(page)] number Required with [show-all]="false" or Optional with [show-all]="true"

Page number

[page]="1"

supports two way data binding as well

[(page)]="pageVariable"

If you want that the two way data binding actually updates your page variable on page change/scroll - you have to be sure that you define the height of the container, for example:

pdf-viewer {
    display: block;
    height: 100vh;
}

[stick-to-page]

Property Type Required
[stick-to-page] boolean Optional

Sticks view to the page. Works in combination with [show-all]="true" and page.

[stick-to-page]="true"

[render-text]

Property Type Required
[render-text] boolean Optional

Enable text rendering, allows to select text

[render-text]="true"

[render-text-mode]

Property Type Required
[render-text-mode] RenderTextMode Optional

Used in combination with [render-text]="true"

Controls if the text layer is enabled, and the selection mode that is used.

0 = RenderTextMode.DISABLED. - disable the text selection layer

1 = RenderTextMode.ENABLED. - enables the text selection layer

2 = RenderTextMode.ENHANCED - enables enhanced text selection

[render-text-mode]="1"

[external-link-target]

Property Type Required
[external-link-target] string Optional

Used in combination with [render-text]="true"

Link target

  • blank
  • none
  • self
  • parent
  • top
[external-link-target]="'blank'"

[rotation]

Property Type Required
[rotation] number Optional

Rotate PDF

Allowed step is 90 degree, ex. 0, 90, 180

[rotation]="90"

[zoom]

Property Type Required
[zoom] number Optional

Zoom pdf

[zoom]="0.5"

[zoom-scale]

Property Type Required
[zoom-scale] 'page-width'|'page-fit'|'page-height' Optional

Defines how the Zoom scale is computed when [original-size]="false", by default set to 'page-width'.

  • 'page-width' with zoom of 1 will display a page width that take all the possible horizontal space in the container

  • 'page-height' with zoom of 1 will display a page height that take all the possible vertical space in the container

  • 'page-fit' with zoom of 1 will display a page that will be scaled to either width or height to fit completely in the container

[zoom-scale]="'page-width'"

[original-size]

Property Type Required
[original-size] boolean Optional
  • if set to true - size will be as same as original document
  • if set to false - size will be as same as container block
[original-size]="true"

[fit-to-page]

Property Type Required
[fit-to-page] boolean Optional

Works in combination with [original-size]="true". You can show your document in original size, and make sure that it's not bigger then container block.

[fit-to-page]="false"

[show-all]

Property Type Required
[show-all] boolean Optional

Show single or all pages altogether

[show-all]="true"

[autoresize]

Property Type Required
[autoresize] boolean Optional

Turn on or off auto resize.

!Important To make [autoresize] work - make sure that [original-size]="false" and pdf-viewer tag has max-width or display are set.

[autoresize]="true"

[c-maps-url]

Property Type Required
[c-maps-url] string Optional

Url for non-latin characters source maps.

[c-maps-url]="'assets/cmaps/'"

Default url is: https://unpkg.com/pdfjs-dist@2.0.550/cmaps/

To serve cmaps on your own you need to copy node_modules/pdfjs-dist/cmaps to assets/cmaps.

[show-borders]

Property Type Required
[show-borders] boolean Optional

Show page borders

[show-borders]="true"

(after-load-complete)

Property Type Required
(after-load-complete) callback Optional

Get PDF information with callback

First define callback function "callBackFn" in your controller,

callBackFn(pdf: PDFDocumentProxy) {
   // do anything with "pdf"
}

And then use it in your template:

(after-load-complete)="callBackFn($event)"

(page-rendered)

Property Type Required
(page-rendered) callback Optional

Get event when a page is rendered. Called for every page rendered.

Define callback in your component:

pageRendered(e: CustomEvent) {
  console.log('(page-rendered)', e);
}

And then bind it to <pdf-viewer>:

(page-rendered)="pageRendered($event)"

(pages-initialized)

Property Type Required
(pages-initialized) callback Optional

Get event when the pages are initialized.

Define callback in your component:

pageInitialized(e: CustomEvent) {
  console.log('(pages-initialized)', e);
}

And then bind it to <pdf-viewer>:

(pages-initialized)="pageInitialized($event)"

(text-layer-rendered)

Property Type Required
(text-layer-rendered) callback Optional

Get event when a text layer is rendered.

Define callback in your component:

textLayerRendered(e: CustomEvent) {
  console.log('(text-layer-rendered)', e);
}

And then bind it to <pdf-viewer>:

(text-layer-rendered)="textLayerRendered($event)"

(error)

Property Type Required
(error) callback Optional

Error handling callback

Define callback in your component's class

onError(error: any) {
  // do anything
}

Then add it to pdf-component in component's template

(error)="onError($event)"

(on-progress)

Property Type Required
(on-progress) callback Optional

Loading progress callback - provides progress information total and loaded bytes. Is called several times during pdf loading phase.

Define callback in your component's class

onProgress(progressData: PDFProgressData) {
  // do anything with progress data. For example progress indicator
}

Then add it to pdf-component in component's template

(on-progress)="onProgress($event)"

Render local PDF file

In your html template add input:

<input (change)="onFileSelected()" type="file" id="file">

and then add onFileSelected method to your component:

onFileSelected() {
  let $img: any = document.querySelector('#file');

  if (typeof (FileReader) !== 'undefined') {
    let reader = new FileReader();

    reader.onload = (e: any) => {
      this.pdfSrc = e.target.result;
    };

    reader.readAsArrayBuffer($img.files[0]);
  }
}

Set custom path to the worker

By default the worker is loaded from cdnjs.cloudflare.com.

In your code update path to the worker to be for example /pdf.worker.js

(window as any).pdfWorkerSrc = '/pdf.worker.js';

This should be set before pdf-viewer component is rendered.

Search in the PDF

Use pdfFindController for search functionality.

In your component's ts file:

  • Add reference to pdf-viewer,
  • then when needed execute search()
@ViewChild(PdfViewerComponent) private pdfComponent: PdfViewerComponent;

search(stringToSearch: string) {
  this.pdfComponent.pdfFindController.executeCommand('find', {
    caseSensitive: false, findPrevious: undefined, highlightAll: true, phraseSearch: true, query: stringToSearch
  });
}

Contribute

See CONTRIBUTING.md

Donation

If this project help you reduce time to develop, you can give me a cup of tea :)

paypal

License

MIT © Vadym Yatsyuk

  • 在ionic项目中引入ng2-pdf-viewer后,执行build命令后失败,报错。 node_modules/ng2-pdf-viewer/src/app/pdf-viewer/pdf-viewer.component.d.ts文件中的第5行 import { PDFDocumentProxy, PDFSource, PDFProgressData } from 'pdfjs-dist'; 报

  • 这个问题比较偶然,所以在这里记录一下。 这个ionic项目有一个pdf查看的功能,用到了插件ng2-pdf-viewer这个插件,之前在android上跑的一直是好好的,但是最近突然有人反馈在ios上查看不了pdf了。拉取项目,打包后打开这个项目,爆了一个rxjs的错,在网上查找后,将rxjs的版本由5.1.1改为5.5.2,然后项目可以跑了,但是项目在构建时又出现一个错, ionic-img-v

  • npm install ng2-pdf-viewer@3.0.8 --save 需要使用 3.0.8版本的 在跟组件中注册模块 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './ap

  •   文章转自:https://blog.csdn.net/Raytheon107/article/details/82690687 亲测有效。 第一步:安装 ng2-pdf-viewer npm install ng2-pdf-viewer --save 第二步:新建页面用于展示pdf 注释:新建页面时需要删除.module.ts文件(去除懒加载) ionic g page showpdf 第三步

 相关资料
  • Angular PDFJS viewer with Mozilla's ViewerJS. Supports Angular 2+ �� Thanks a ton to the community - We are talking Downloads in millions now!!! This project is currently maintained by a single develo

  • 该项目已停止维护 此 iOS PDF 查看器应用程序基于GitHub上https://github.com/vfr/Reader存储库中的开源 iOS PDF 阅读器代码。 特征 通用:可在iPad,iPhone和iPod touch上运行。 使用核心数据来跟踪PDF文档。 PDF文档可以组织到文件夹中。 支持iTunes文件共享进行文件传输。 处理其他应用程序(“邮件”等)中的“打开方式...”

  • angular-pdf-viewer 是一项 AngularJs 指令,用来显示 PDF。 用法 bower install angular-pdf-viewer 包括lib,AngularJS和PDFJS的路径: <script src="bower_components/pdfjs-dist/build/pdf.js"></script><script src="bower_component

  • React PDF viewer 是用于查看 PDF 文档的 React 组件,采用 TypeScript 编写,完全基于 React hooks。 特性 支持密码保护的文档 缩放:支持自定义级别,例如实际大小、页面适合度和页面宽度 支持页面间导航 支持快速跳转到第一页和最后一页 搜索文本 预览页面缩略图 查看和导航目录 罗列和下载附件 支持文本选择和手动工具模式 支持不同的滚动模式 支持全屏模式

  • Basic PDF reader/viewer 实现了在 iOS 设备屏幕上浏览 PDF 文档的功能。

  • 问题内容: 我正在尝试在Blackboard环境中批量下载很多文件(在世界各地的大学/学校中经常使用)。我能够检索文件所在的链接,但是一个市长问题: 当文件是.pdf文件时,它会显示在新的浏览器选项卡中,而不是被下载。例如,使用click()下载.xlsx文件就可以了。 我可以更改驱动程序设置来更改此行为吗?如何? 编辑 我更新了这个问题以回应Ari的回答。现在,它包含有关实际插件的更多信息。也许