{"id":21827491,"url":"https://github.com/laixiangran/e-ngx-viewer","last_synced_at":"2025-04-14T05:43:01.951Z","repository":{"id":57218032,"uuid":"88356874","full_name":"laixiangran/e-ngx-viewer","owner":"laixiangran","description":"基于Angular的视频/图像/PDF查看器组件","archived":false,"fork":false,"pushed_at":"2018-06-30T02:53:08.000Z","size":8813,"stargazers_count":13,"open_issues_count":0,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-10T08:03:39.173Z","etag":null,"topics":["angular","image-viewer","pdf-viewer","video-viewer"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/laixiangran.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-15T15:43:24.000Z","updated_at":"2024-01-02T09:19:19.000Z","dependencies_parsed_at":"2022-09-01T21:51:01.219Z","dependency_job_id":null,"html_url":"https://github.com/laixiangran/e-ngx-viewer","commit_stats":null,"previous_names":["laixiangran/essence-ng2-viewer"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laixiangran%2Fe-ngx-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laixiangran%2Fe-ngx-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laixiangran%2Fe-ngx-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laixiangran%2Fe-ngx-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/laixiangran","download_url":"https://codeload.github.com/laixiangran/e-ngx-viewer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248830420,"owners_count":21168272,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","image-viewer","pdf-viewer","video-viewer"],"created_at":"2024-11-27T18:13:18.662Z","updated_at":"2025-04-14T05:43:01.921Z","avatar_url":"https://github.com/laixiangran.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# e-ngx-viewer\n\n基于Angular的视频/图像/PDF查看器组件。\n\n## Introduce\n\n1. video-viewer（视频播放器）\n\n\t支持视频的播放、暂停、快进/退、音量调整等功能\n\n2. image-viewer（图片查看器）\n\n\t支持图片的放大、缩小、旋转、翻转、拖动等功能\n\n3. pdf-viewer（pdf阅读器）\n\n\t支持pdf的放大、缩小、跳转到指定页、文档搜索、自适应页面、打印等功能\n\n## Usage\n\n1. Install\n\n\t```shell\n\tnpm install --save e-ngx-viewer@latest\n\t```\n\n2. Set in the .angular-cli.json（@angular/cli）\n\n    ```json\n    \"styles\": [\n        \"../node_modules/font-awesome/css/font-awesome.min.css\"\n    ]\n    ```\n\n4. Deploy pdfjs (only for pdf-viewer)\n\n\t要能正常使用pdf-viewer，则需要将构建好的[pdfjs](https://github.com/mozilla/pdf.js)部署到服务器上，与要查看的pdf文件为同一个服务器（目前不支持跨域查看）。\n\t\n\t检查是否部署成功（根据实际部署的位置）：访问`http://xxx/pdfjs/web/viewer.html`，能正常访问并加载默认的pdf则说明部署成功。\n\n5. Add the ENgxViewerModule\n\n\t```typescript\n\timport {ENgxViewerModule} from \"e-ngx-viewer\";\n\t@NgModule({\n\t    imports: [\n\t        ENgxViewerModule\n\t    ]\n\t})\n\t```\n\n6. Template\n\n\t```html\n\t\u003ch2\u003evideo viewer\u003c/h2\u003e\n\t\u003ce-ngx-viewer (ready)=\"videoViewerReady($event)\" [model]=\"'video'\" [poster]=\"poster\" [source]=\"videoUrl\" [width]=\"1000\" [height]=\"700\" [videoWidth]=\"500\"\u003e\u003c/e-ngx-viewer\u003e\n\t\n\t\u003ch2\u003eimage viewer\u003c/h2\u003e\n\t\u003ce-ngx-viewer (ready)=\"imageViewerReady($event)\" [model]=\"'image'\" [source]=\"images\" [width]=\"1000\" [height]=\"700\"\u003e\u003c/e-ngx-viewer\u003e\n\t\n\t\u003ch2\u003epdf viewer\u003c/h2\u003e\n\t\u003ce-ngx-viewer (ready)=\"pdfViewerReady($event)\" [model]=\"'pdf'\" [source]=\"pdfUrl\" [viewerUrl]=\"pdfViewerUrl\" [width]=\"1000\" [height]=\"700\"\u003e\u003c/e-ngx-viewer\u003e\n\t```\n\n7. Component\n\n\t```typescript\n\tpdfViewerUrl: string = 'http://localhost:4200/assets/scripts/pdfjs/web/viewer.html';\n\tpdfUrl: string = 'http://localhost:4200/assets/mock/test.pdf';\n\timages: string[] = [];\n\tvideoUrl: string = 'http://localhost:4200/assets/mock/test.mp4';\n\tposter: string = 'http://localhost:4200/assets/mock/poster.jpg';\n\t\n\tconstructor () {\n\t    for (let i = 1; i \u003c 13; i++) {\n\t        this.images.push(`http://localhost:4200/assets/mock/image-viewer/img_${i}.jpg`);\n\t    }\n\t}\n\t\n\tvideoViewerReady ($event: any) {\n\t\tconsole.log($event);\n\t}\n\t\n\timageViewerReady ($event: any) {\n\t    console.log($event);\n\t}\n\t\n\tpdfViewerReady ($event: any) {\n\t    console.log($event);\n\t}\n\t```\n\n## API\n\n### Inputs\n\n- `model`（`?string='pdf'`） - 视图模式，默认`pdf`。支持`pdf`、`image`两种模式，将支持`video`模式\n\n- `width`（`?number=600`） - 查看器宽度\n- `video(?number=400)` - video标签的宽度\n\n- `height`（`?number=800`） - 查看器高度\n\n- `source`（`string | string[]`） - 查看的pdf路径、图片文件路径数组及视频路径，`pdf`与`video`模式下数据类型为`string[]`，`image`模式下数据类型为`string[]`\n\n- `poster` (`string`) - 视频预览图（海报图片）路径，`video`模式下有效\n\n- `viewerUrl`（`string`） - pdfjs的viewer.html所在路径(pdfjs/web/viewer.html)，`pdf`模式下有效\n\n### Outputs (event)\n\n- `ready` - 查看器初始完成的事件\n\n## Develop\n\n\t```shell\n\tnpm install // 安装依赖包\n\t\n\tnpm start // 启动项目\n\t```\n\n# License\n\n[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaixiangran%2Fe-ngx-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flaixiangran%2Fe-ngx-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaixiangran%2Fe-ngx-viewer/lists"}