Skip to content

laixiangran/e-ngx-viewer

Repository files navigation

e-ngx-viewer

基于Angular的视频/图像/PDF查看器组件。

Introduce

  1. video-viewer(视频播放器)

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

  2. image-viewer(图片查看器)

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

  3. pdf-viewer(pdf阅读器)

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

Usage

  1. Install

    npm install --save e-ngx-viewer@latest
  2. Set in the .angular-cli.json(@angular/cli)

    "styles": [
        "../node_modules/font-awesome/css/font-awesome.min.css"
    ]
  3. Deploy pdfjs (only for pdf-viewer)

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

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

  4. Add the ENgxViewerModule

    import {ENgxViewerModule} from "e-ngx-viewer";
    @NgModule({
        imports: [
            ENgxViewerModule
        ]
    })
  5. Template

    <h2>video viewer</h2>
    <e-ngx-viewer (ready)="videoViewerReady($event)" [model]="'video'" [poster]="poster" [source]="videoUrl" [width]="1000" [height]="700" [videoWidth]="500"></e-ngx-viewer>
    
    <h2>image viewer</h2>
    <e-ngx-viewer (ready)="imageViewerReady($event)" [model]="'image'" [source]="images" [width]="1000" [height]="700"></e-ngx-viewer>
    
    <h2>pdf viewer</h2>
    <e-ngx-viewer (ready)="pdfViewerReady($event)" [model]="'pdf'" [source]="pdfUrl" [viewerUrl]="pdfViewerUrl" [width]="1000" [height]="700"></e-ngx-viewer>
  6. Component

    pdfViewerUrl: string = 'http://localhost:4200/assets/scripts/pdfjs/web/viewer.html';
    pdfUrl: string = 'http://localhost:4200/assets/mock/test.pdf';
    images: string[] = [];
    videoUrl: string = 'http://localhost:4200/assets/mock/test.mp4';
    poster: string = 'http://localhost:4200/assets/mock/poster.jpg';
    
    constructor () {
        for (let i = 1; i < 13; i++) {
            this.images.push(`http://localhost:4200/assets/mock/image-viewer/img_${i}.jpg`);
        }
    }
    
    videoViewerReady ($event: any) {
    	console.log($event);
    }
    
    imageViewerReady ($event: any) {
        console.log($event);
    }
    
    pdfViewerReady ($event: any) {
        console.log($event);
    }

API

Inputs

  • model?string='pdf') - 视图模式,默认pdf。支持pdfimage两种模式,将支持video模式

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

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

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

  • sourcestring | string[]) - 查看的pdf路径、图片文件路径数组及视频路径,pdfvideo模式下数据类型为string[]image模式下数据类型为string[]

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

  • viewerUrlstring) - pdfjs的viewer.html所在路径(pdfjs/web/viewer.html),pdf模式下有效

Outputs (event)

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

Develop

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

npm start // 启动项目
```

License

MIT License