在前端开发中，PDF 文件展示和阅读是一项非常常见的需求。而 ngx-pdf-viewer 是一个基于 Angular 框架的 PDF 文件展示库，提供了丰富的功能和 API，能够轻松地将 PDF 文件集成到 Angular 应用程序中。本文将介绍如何使用 ngx-pdf-viewer 包。
安装 ngx-pdf-viewer
使用 npm 安装 ngx-pdf-viewer：
npm install ngx-pdf-viewer
使用 ngx-pdf-viewer
1. 导入 ngx-pdf-viewer 模块
在 app.module.ts 文件中导入 PdfViewerModule：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - --------------- - ---- ----------------- ----------- ------------- --------------- -------- --------------- ----------------- ---------- -------------- -- ------ ----- --------- --
2. 添加 PDF 文件
在组件中，使用 ViewChild 获取 PDF viewer 实例，并加载 PDF 文件：
-- -------------------- ---- -------
------ - ---------- --------- - ---- ----------------
------ - ------------------ - ---- -----------------
------------
--------- -----------
--------- ------------ -------------- ------------- ---------------------------------------------
--
------ ----- ------------ -
------------------------------ ------- ---------- -------------------
------ ------ - -----------------
------ ------------ - -----
------ ---- - --
------------------ ---- -
--------------------- - ------------
-------------------------
-
-3. 添加控制按钮
添加上一页、下一页、缩小、放大等控制按钮：
-- -------------------- ---- -------
------ - ---------- --------- - ---- ----------------
------ - ------------------ - ---- -----------------
------------
--------- -----------
--------- -
---- -----------------
------- ---------------------------------
------- ---------------------------------
------- -------------------------------
------- ------------------------------
------
----------- -------------- ------------- ------------------------------ ------------- --------------------- ---------------------------------------------------
-
--
------ ----- ------------ -
------------------------------ ------- ---------- -------------------
------ ------ - -----------------
------ ------------ - -----
------ ---- - --
------ ---- - ----
------ -------- - --
------ ----------- ---- -
------------
-
------ ----------- ---- -
------------
-
------ ---------- ---- -
--------- -- ----
-
------ --------- ---- -
--------- -- ----
-
------ ------------------- -------- ---- -
--------- - ------
-
------------------ ---- -
--------------------- - ------------
-------------------------
-
-ngx-pdf-viewer 的 API
ngx-pdf-viewer 包含以下 API：
输入
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| src | string | '' | PDF 文件的 URL 地址 |
| page | number | 1 | 当前页数 |
| original-size | boolean | true | PDF 文件的原始大小 |
| zoom | number | 1.0 | 缩放倍数 |
| rotation | number | 0 | 旋转角度（0, 90, 180, 270） |
| stick-to-page | boolean | false | 展示在页面中央或实际大小 |
| autoresize | boolean | false | 自适应大小 |
| show-all | boolean | false | 展示所有 PDF 页面 |
| render-text | boolean | true | 渲染 PDF 中的文本 |
| external-link | string | '' | PDF 中链接的打开方式（'page', 'new-window'） |
| show-annotations | boolean | true | 渲染 PDF 中的注释（高亮、标记、批注等） |
| render-text-mode | string | 'css' | 渲染 PDF 中的文字模式（'canvas', 'css'） |
| disable-text-layer | boolean | false | 禁用 PDF 中的文字图层 |
| stick-toolbar | boolean | false | 工具栏固定到顶部 |
| download | boolean | false | 下载 PDF 文件 |
| download-filename | string | '' | 下载 PDF 文件时的文件名 |
输出
| 属性 | 类型 | 说明 |
|---|---|---|
| onPageChange | EventEmitter<number> | 页面切换事件 |
| onPageRender | EventEmitter<pagerenderevent> | 页面渲染事件 |
| onError | EventEmitter<any> | 加载 PDF 文件发生错误事件 |
| onProgress | EventEmitter<number> | PDF 文件加载进度变化事件 |
结语
ngx-pdf-viewer 包含了丰富的功能和 API，能够帮助我们轻松地实现 PDF 文件的展示和阅读。在实际的开发应用中，我们可以根据需求，灵活运用 ngx-pdf-viewer 提供的功能和 API，以便更好地服务于用户的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005538281e8991b448d0b2c