PDF 文件在现代 Web 应用程序中起着越来越重要的作用。为了方便地显示 PDF 文件，我们可以使用开源的 npm 包 bluestoneapp-ng2-pdf-viewer。该包提供了一个 Angular 组件，可以轻松地将 PDF 文件显示在你的应用中。在本篇文章中，我们将为您提供该包的使用教程。
依赖安装
在使用 bluestoneapp-ng2-pdf-viewer 之前，您需要先安装一些依赖项：
- Angular （版本 5 或更高版本）
- @angular/material
- pdfjs-dist
您可以使用以下命令将这些依赖项安装到您的项目中：
npm install @angular/material pdfjs-dist --save
安装 bluestoneapp-ng2-pdf-viewer 包
安装 bluestoneapp-ng2-pdf-viewer 的最简单方法是通过 npm 包管理器进行安装。您可以使用以下命令在您的项目中安装该包：
npm install bluestoneapp-ng2-pdf-viewer --save
使用 bluestoneapp-ng2-pdf-viewer
安装完成 bluestoneapp-ng2-pdf-viewer 后，我们就可以在我们的 Angular 项目中使用该组件了。要使用该组件，您需要在您的应用程序模块中导入它并将它放到您的组件中。
-- -------------------- ---- ------- ------ - ---------- ------ - ---- ---------------- ------ - --------------- - ---- ------------------------------ ------------ --------- ----------------- --------- ------------ ------------------------------------------------- -- ------ ----- ------------------ ---------- ------ - ---------- - - -
在上面的代码中，我们首先导入了 PdfViewerModule，然后在我们的组件中引用了该组件。我们使用了 src 属性将 PDF 文件的路径传递给该组件。
注意：src 属性应该指向您服务器上的 PDF 文件的路径。如果您的应用程序不在同一服务器上，请使用完整的 URL。
使用自定义加载程序
bluestoneapp-ng2-pdf-viewer 还可以与 PDF 文件的自定义加载程序一起使用。加载程序将在 PDF 文件加载时显示在屏幕上。
-- -------------------- ---- -------
------------
--------- -----------------
--------- -
-----------
---------------------------------
------------------
-----------------------
----------
-------------------------------------------------
--------------
--
--
------ ----- ------------------ ---------- ------ -
---------------------- ---- -
-- ---- ---- ----
-
-在上面的示例中，我们在 PDF 文件加载完成后调用了 afterLoadComplete 回调函数。您可以在该函数中编写自己的代码以实现自定义加载器。
总结
在本文中，我们介绍了如何使用 npm 包 bluestoneapp-ng2-pdf-viewer 来轻松地将 PDF 文件显示在我们的 Angular 应用程序中。我们介绍了如何安装依赖项并使用组件来实现该功能。我们还演示了如何使用自定义加载器。
bluestoneapp-ng2-pdf-viewer 是一个非常实用的 Angular 组件，让您可以轻松地在您的 Web 应用程序中显示 PDF 文件。它对开发人员来说是一个必不可少的工具，较简单易上手，希望能够对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664081e8991b448e24a6