如果你正在寻找一个快速、易用的文件查看器，那么 ngx-file-viewer 可能是你的不二之选。ngx-file-viewer 是一个基于 Angular 7+ 的 npm 包，可以轻松实现文件类型判断和文件预览，支持多种文件类型，包括 PDF、图像文件、CSV 文件等。
安装
你可以在终端使用 npm 命令安装 ngx-file-viewer。在项目目录下执行以下命令：
npm install ngx-file-viewer
使用
为了展示 ngx-file-viewer 的使用方法，我们先创建一个简单的 Angular 应用。使用 Angular CLI 创建一个新的项目并进入项目目录：
ng new my-app cd my-app
安装 ngx-file-viewer，执行以下命令：
npm install ngx-file-viewer
在项目中引入 ngx-file-viewer 模块。打开 app.module.ts 文件并添加以下代码：
-- -------------------- ---- -------
------ - ------------------- - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
-------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -在组件模板中使用 ngx-file-viewer，将文件路径传递给 ngx-file-viewer 组件即可。示例如下：
<ngx-file-viewer src="https://url.to.your/file"></ngx-file-viewer>
配置
ngx-file-viewer 的配置非常灵活。你可以通过配置传递参数来启用或禁用文件预览功能，也可以通过自定义渲染组件来自定义文件预览效果。
以下是可用的配置参数：
src：文件路径（必选参数）mode：文件预览模式（可选参数，默认值为'auto'）print：启用或禁用打印功能（可选参数，默认为true）zoom：启用或禁用缩放功能（可选参数，默认为true）fullScreen：启用或禁用全屏模式（可选参数，默认为false）fullscreenEl：自定义全屏元素的名称（可选参数，默认为document.documentElement）navbarStyle：自定义导航栏样式（可选参数，默认为{}）spinnerColor：自定义加载图标颜色（可选参数，默认为#3f51b5）
以下是一个完整的示例：
-- -------------------- ---- ------- ---------------- ------------------------------ ----------- -------------- ------------- -------------------- ----------------------------------------- -------------------------------- -------- -------------------------- -------------------
自定义渲染组件
ngx-file-viewer 支持自定义渲染组件，你可以通过以下方法实现：
- 创建一个新的组件用于渲染文件类型
- 在文件类型配置中传递该组件作为渲染组件
例如，我们可以创建一个用于渲染 .docx 文件的组件 DocxViewerComponent，并将它添加到配置中：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------------- --------------------- ----------------- - ---- ------------------
------------
--------- ------------------
--------- -------- ------------------------
--
------ ----- ------------------- ---------- -------------------- -
------ ---------------- -------- ------- -
------ -------------------------
-
------ --------------- ------------ ---- ------- ------- --------------------- ------------- -
----------------- - -------- ------------------------
------ ------------------
-
-
----- ------ - --- ----------------------
----------- - ---------------------------
-------------- - --- ----------------------
-----------
------------- -
-------------
-------------------
--
-------- -
--------------
-----------------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -在以上示例中，我们创建了一个名为 DocxViewerComponent 的新组件。然后在模块中定义了一个新的配置对象，并将其作为参数传递给 NgxFileViewerModule.forRoot() 方法。在配置对象中，我们将预览模式设置为 'document'，并将 DocxViewerComponent 作为工厂类传递给了 factory 属性。
结论
我们已经详细介绍了 ngx-file-viewer 的安装、基本用法和高级配置方法。通过 ngx-file-viewer，你可以方便、简单地预览多种文件类型。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562bd81e8991b448dffed