e-ngx-viewer
基于Angular的视频/图像/PDF查看器组件。
Introduce
-
video-viewer(视频播放器)
支持视频的播放、暂停、快进/退、音量调整等功能
-
image-viewer(图片查看器)
支持图片的放大、缩小、旋转、翻转、拖动等功能
-
pdf-viewer(pdf阅读器)
支持pdf的放大、缩小、跳转到指定页、文档搜索、自适应页面、打印等功能
Usage
-
Install
npm install --save e-ngx-viewer@latest -
Set in the .angular-cli.json(@angular/cli)
"styles": -
Deploy pdfjs (only for pdf-viewer)
要能正常使用pdf-viewer,则需要将构建好的pdfjs部署到服务器上,与要查看的pdf文件为同一个服务器(目前不支持跨域查看)。
检查是否部署成功(根据实际部署的位置):访问
http://xxx/pdfjs/web/viewer.html
,能正常访问并加载默认的pdf则说明部署成功。 -
Add the ENgxViewerModule
; -
Template
video viewerimage viewerpdf viewer -
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';constructorvideoViewerReady $event: anyimageViewerReady $event: anypdfViewerReady $event: any
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 // 启动项目
```