https://github.com/laixiangran/e-ngx-viewer
基于Angular的视频/图像/PDF查看器组件
https://github.com/laixiangran/e-ngx-viewer
angular image-viewer pdf-viewer video-viewer
Last synced: about 1 year ago
JSON representation
基于Angular的视频/图像/PDF查看器组件
- Host: GitHub
- URL: https://github.com/laixiangran/e-ngx-viewer
- Owner: laixiangran
- License: mit
- Created: 2017-04-15T15:43:24.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-06-30T02:53:08.000Z (almost 8 years ago)
- Last Synced: 2025-04-10T08:03:39.173Z (about 1 year ago)
- Topics: angular, image-viewer, pdf-viewer, video-viewer
- Language: JavaScript
- Homepage:
- Size: 8.4 MB
- Stars: 13
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# e-ngx-viewer
基于Angular的视频/图像/PDF查看器组件。
## Introduce
1. video-viewer（视频播放器）
支持视频的播放、暂停、快进/退、音量调整等功能
2. image-viewer（图片查看器）
支持图片的放大、缩小、旋转、翻转、拖动等功能
3. pdf-viewer（pdf阅读器）
支持pdf的放大、缩小、跳转到指定页、文档搜索、自适应页面、打印等功能
## Usage
1. Install
```shell
npm install --save e-ngx-viewer@latest
```
2. Set in the .angular-cli.json（@angular/cli）
```json
"styles": [
"../node_modules/font-awesome/css/font-awesome.min.css"
]
```
4. Deploy pdfjs (only for pdf-viewer)
要能正常使用pdf-viewer，则需要将构建好的[pdfjs](https://github.com/mozilla/pdf.js)部署到服务器上，与要查看的pdf文件为同一个服务器（目前不支持跨域查看）。
检查是否部署成功（根据实际部署的位置）：访问`http://xxx/pdfjs/web/viewer.html`，能正常访问并加载默认的pdf则说明部署成功。
5. Add the ENgxViewerModule
```typescript
import {ENgxViewerModule} from "e-ngx-viewer";
@NgModule({
imports: [
ENgxViewerModule
]
})
```
6. Template
```html
video viewer
image viewer
pdf viewer
```
7. Component
```typescript
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`。支持`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
[](/LICENSE)