前言
随着互联网的普及，PDF 文件的使用越来越广泛，而在前端开发中需要显示 PDF 文件的需求也随之增加。ng2-pdf-viewer 是一个基于 Angular 的 PDF 文件查看器组件，它能够让我们很方便地在网页上显示 PDF 文件。本文将为大家讲解如何使用该组件。
安装
首先，我们需要使用 npm 指令来安装 ng2-pdf-viewer：
npm install ng2-pdf-viewer
使用
在使用 ng2-pdf-viewer 组件时，我们需要先引入 PdfViewerModule 模块，然后在 html 文件中使用 pdf-viewer 标签来显示 PDF 文件。下面是一个简单的示例：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ---------------- - ---- -----------------------
------ - --------------- - ---- -----------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
-----------------
---------------
--
---------- ---
---------- - ------------ -
--
------ ----- --------- - -<pdf-viewer [src]="pdfSrc"></pdf-viewer>
其中 pdfSrc 是一个变量，表示 PDF 文件所在的路径。我们可以在组件代码中通过改变 pdfSrc 来显示不同的 PDF 文件。
另外，组件还提供了其他各种属性与事件来控制 PDF 显示和交互行为，例如下一页，上一页，放大，缩小等等。具体可以参考官方文档。
小结
在本文中，我们为大家讲解了 ng2-pdf-viewer 组件的安装与使用方法，并演示了一个简单的案例。希望能够帮助到需要在网页中显示 PDF 文件的开发者们，也希望大家能够通过本文学习到更多有用的技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/62059