essence-ng2-viewer

essence-ng2-viewer is an Angular component that can view video/image/pdf.

Introduce

1. video-viewer（视频播放器）

   支持视频的播放、暂停、快进/退、音量调整等功能

2. image-viewer（图片查看器）

   支持图片的放大、缩小、旋转、翻转、拖动等功能

3. pdf-viewer（pdf阅读器）

   支持pdf的放大、缩小、跳转到指定页、文档搜索、自适应页面、打印等功能

Usage

1. Install

   1npm install --save essence-ng2-viewer@latest

2. Set in the .angular-cli.json（@angular/cli）

   1"styles": [
   2    "../node_modules/font-awesome/css/font-awesome.min.css"
   3]

3. Deploy pdfjs (only for pdf-viewer)

   要能正常使用pdf-viewer，则需要将构建好的pdfjs部署到服务器上，与要查看的pdf文件为同一个服务器（目前不支持跨域查看）。

   检查是否部署成功（根据实际部署的位置）：访问http://xxx/pdfjs/web/viewer.html，能正常访问并加载默认的pdf则说明部署成功。

4. Add the EssenceNg2ViewerModule

   1import {EssenceNg2ViewerModule} from "essence-ng2-viewer";
   2@NgModule({
   3    imports: [
   4        EssenceNg2ViewerModule
   5    ]
   6})

5. Template

   1<h2>video viewer</h2>
   2<essence-ng2-viewer (ready)="videoViewerReady($event)" [model]="'video'" [poster]="poster" [source]="videoUrl" [width]="1000" [height]="700" [videoWidth]="500"></essence-ng2-viewer>
   3
   4<h2>image viewer</h2>
   5<essence-ng2-viewer (ready)="imageViewerReady($event)" [model]="'image'" [source]="images" [width]="1000" [height]="700"></essence-ng2-viewer>
   6
   7<h2>pdf viewer</h2>
   8<essence-ng2-viewer (ready)="pdfViewerReady($event)" [model]="'pdf'" [source]="pdfUrl" [viewerUrl]="pdfViewerUrl" [width]="1000" [height]="700"></essence-ng2-viewer>

6. Component

   1pdfViewerUrl: string = 'http://localhost:4200/assets/scripts/pdfjs/web/viewer.html';
   2pdfUrl: string = 'http://localhost:4200/assets/mock/test.pdf';
   3images: string[] = [];
   4videoUrl: string = 'http://localhost:4200/assets/mock/test.mp4';
   5poster: string = 'http://localhost:4200/assets/mock/poster.jpg';
   6
   7constructor () {
   8    for (let i = 1; i < 13; i++) {
   9        this.images.push(`http://localhost:4200/assets/mock/image-viewer/img_${i}.jpg`);
   10    }
   11}
   12
   13videoViewerReady ($event: any) {
   14	console.log($event);
   15}
   16
   17imageViewerReady ($event: any) {
   18    console.log($event);
   19}
   20
   21pdfViewerReady ($event: any) {
   22    console.log($event);
   23}

API

Inputs

• model（?string='pdf'） - 视图模式，默认pdf。支持pdf、image两种模式，将支持video模式

• width（?number=600） - 查看器宽度

• video(?number=400) - video标签的宽度

• height（?number=800） - 查看器高度

• source（string | string[]） - 查看的pdf路径、图片文件路径数组及视频路径，pdf与video模式下数据类型为string[]，image模式下数据类型为string[]

• poster (string) - 视频预览图（海报图片）路径，video模式下有效

• viewerUrl（string） - pdfjs的viewer.html所在路径(pdfjs/web/viewer.html)，pdf模式下有效

Outputs (event)

• ready - 查看器初始完成的事件

Develop

```shell
npm install // 安装依赖包

npm start // 启动项目
```

License