在前端开发中，我们常常需要实现 PDF 阅读器的功能，而 ng-pdf 即为一款可以在 Angular 应用中使用的方便易用的 PDF 阅读器插件。本文将介绍 ng-pdf 的使用方法，帮助读者快速上手并实现 PDF 阅读器的功能。
什么是 ng-pdf？
ng-pdf 是一款基于 AngularJS 和 PDF.js 的 PDF 阅读器插件，它能够方便地在 Angular 应用中使用，并提供了丰富的配置选项以满足不同的需求。
安装 ng-pdf
想要使用 ng-pdf，我们首先需要将其安装到我们的项目中。打开终端，并在项目根目录下运行以下命令：
npm install ng-pdf --save
运行命令后，ng-pdf 就将被安装到我们的项目中了。
ng-pdf 的使用
在项目中集成 ng-pdf 是非常简单的，只需要在需要使用 PDF 阅读器的页面中引入 ng-pdf 模块即可。
引入 ng-pdf 模块
在需要使用 ng-pdf 的页面的组件声明处引入 ng-pdf 模块：
-- -------------------- ---- -------
------ - ----------- - ---- ---------
-----------
-------- -
-----------
--
------------- ----------------
--
------ ----- ----------- - -在模板中使用 ng-pdf
在模板中，我们需要使用 ng-pdf-viewer 标签来声明 PDF 阅读器的容器，并将 ng-pdf 的属性绑定到标签中。
-- -------------------- ---- ------- -------------- -------------- ------------- -------------------- ------------------------------ ---------------------------- ----------------------------------- ------------- --------------------- ------------------------- ------------------------- -------------------------- --------------------------------- ---------------------------- ------------------------------------------------- ------------------------ ----------------
在上述代码中，我们为 ng-pdf-viewer 提供了以下 ng-pdf 的属性绑定：
src：指定需要渲染的 PDF 文件路径；page：指定需要渲染的 PDF 文件页数；show-all：指定是否需要显示所有的 PDF 文件页；original-size：指定是否需要按照原始尺寸渲染 PDF 文件；pdf-download：指定是否在页面中显示下载按钮；page-render-text：指定是否需要使用 PDF.js 渲染文本；zoom：指定 PDF 文件的缩放比例；rotation：指定 PDF 文件的旋转角度；fit-to-page：指定是否需要按照页面大小缩放 PDF 文件；autoresize：指定是否需要自适应窗口大小；render-text：指定是否需要渲染文本；external-link-target：同 HTML 的target属性一致，用于设置链接打开方式；show-borders：指定是否需要在页面中显示边框。
渲染 PDF 文件
我们可以通过以下方式初始化 PDF 文件：
this.pdfSrc = 'path/to/pdf/file';
上述代码中，我们将 PDF 文件的路径作为 pdfSrc 属性的值。
当我们在页面中显示 PDF 阅读器并渲染 PDF 文件后，我们可以使用以下代码获取所渲染的 PDF 文件的对象：
afterLoadComplete(pdf: any) {
this.pdf = pdf;
}使用 pdf 对象，我们可以轻松地实现 PDF 阅读器中的各种功能，比如在 PDF 文件上进行搜索、获取 PDF 文件的页面数等。
示例代码
下面我们来看一段完整的示例代码，它将展示如何在 Angular 应用中使用 ng-pdf 渲染 PDF 文件。
app.module.ts
引入 ng-pdf 模块：
-- -------------------- ---- -------
------ - ----------- - ---- ---------
-----------
------------- ---------------
-------- -
--------------
-----------
--
---------- ---
---------- --------------
--
------ ----- --------- - -app.component.ts
在组件类中指定需要渲染的 PDF 文件路径：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
--------------
--------------
-------------
--------------------
------------------------------
----------------------------
-----------------------------------
-------------
---------------------
-------------------------
-------------------------
--------------------------
---------------------------------
----------------------------
-------------------------------------------------
------------------------
----------------
-
--
------ ----- ------------ -
------ - -------------------------------------------
---- - --
---- - ----
------------ - ------
--------- - ------
------- - -----
---------- - -----
---------- - -----
------------ - -
------- --
------ -
--
---- ----
---------------------- ---- -
-------- - ----
-
------------ ---- -
-------------------
-
-在上述代码中，我们将 PDF 阅读器的默认配置附在了组件的类中，并指定了需要渲染的 PDF 文件路径。
app.component.html
在 app.component.ts 引入的 HTML 模板中，我们将 PDF 阅读器的宿主元素渲染出来：
<div style="width: 100%; height: 600px;"> <app-root></app-root> </div>
通过以上示例代码，我们可以轻松地在 Angular 应用中使用 ng-pdf，实现 PDF 阅读器的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b7f81e8991b448d90f7