项目作者: laixiangran

项目描述 :
基于Angular的视频/图像/PDF查看器组件
高级语言: JavaScript
项目地址: git://github.com/laixiangran/e-ngx-viewer.git


e-ngx-viewer

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

Introduce

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

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

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

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

  3. pdf-viewer(pdf阅读器)

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

Usage

  1. Install

    1. npm install --save e-ngx-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 ENgxViewerModule

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

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

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

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

  1. ```shell
  2. npm install // 安装依赖包
  3. npm start // 启动项目
  4. ```

License

MIT License