在前端开发中，PDF 文件的展示是一个常见的需求。而 ng2-pdf-viewer-conzentrate 是一个开源的 NPM 包，可以帮助我们方便地在 Angular 2+ 项目中展示 PDF 文件。本文将详细介绍如何使用该包，并提供示例代码和深入解析。
安装和导入
首先，我们需要在项目中安装 ng2-pdf-viewer-conzentrate：
npm install ng2-pdf-viewer-conzentrate --save
然后，在项目中导入并声明该模块：
import { Ng2PdfViewerConzentrateModule } from 'ng2-pdf-viewer-conzentrate';
@NgModule({
imports: [
Ng2PdfViewerConzentrateModule
]
})
export class AppModule { }基本用法
ng2-pdf-viewer-conzentrate 提供了两种展示 PDF 文件的方式：使用 PDF 文件路径或使用 PDF 文件的二进制数据。下面是两种方式的示例代码：
<!-- 使用 PDF 文件路径 --> <pdf-viewer-conzentrate [src]="'assets/PDF文件.pdf'" [page]="1"></pdf-viewer-conzentrate> <!-- 使用 PDF 文件的二进制数据 --> <pdf-viewer-conzentrate [binary]="pdfBinary" [page]="1"></pdf-viewer-conzentrate>
值得注意的是，使用 PDF 文件路径的方式需要将其放置在 assets 目录下，并将路径字符串作为输入属性传递给组件。而使用 PDF 文件的二进制数据时，则需要将数据存储在变量中，并将该变量传递给组件。
高级用法
ng2-pdf-viewer-conzentrate 还提供了众多可选的输入属性和回调函数，使得我们可以更灵活地控制 PDF 文件的展示和交互效果。下面列举了一些常用的属性和回调函数：
-- -------------------- ---- ------- ----------------------- -------------------------- ---------- -------------------- --------------------- ------------ ----------------- -------------- ------------------------------- ----------------------------- ----------------------------- -------------------------------------- -------------------------
stickToPage：控制页面是否自动滚动到当前页，类型为 boolean，默认为 true。showBorders：控制页面是否显示边框，类型为 boolean，默认为 false。可以用于调试时方便查看页面布局。zoom：PDF 文件的初始缩放比例，类型为 number，默认为 1.0。zoomScale：每次缩放的比例增量，类型为 number，默认为 0.1。rotation：PDF 文件的初始旋转角度，类型为 number，默认为 0。onPagesLoaded：PDF 文件加载完成后的回调函数，参数为页面数量。onPageChange：页面切换后的回调函数，参数为当前页码。onZoomChange：页面缩放比例变化后的回调函数，参数为当前缩放比例。onRotationChange：页面旋转角度变化后的回调函数，参数为当前旋转角度。
深入解析
ng2-pdf-viewer-conzentrate 是基于 Mozilla 的 pdf.js 开发完成的，它可以轻松嵌入任何基于 Web 技术的应用程序中，以在浏览器中显示和交互 PDF 文档。pdf.js 使用 Web 技术（HTML5、CSS3、JavaScript）构建，不需要任何插件或软件。同时，ng2-pdf-viewer-conzentrate 也兼容 Angular 的 AoT 编译方式，可以大大提高项目的运行效率。
总结
在本文中，我们介绍了如何使用 npm 包 ng2-pdf-viewer-conzentrate 来展示 PDF 文件，并详细讲解了该包的基本用法和高级用法，以及提供了深入解析。在实际开发中，使用该包可以方便、快捷地在 Angular 2+ 项目中展示 PDF 文件，提高项目的用户体验效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566c381e8991b448e3225