简介
ViewerJS 是一款基于 HTML5 和 JavaScript 的开源文档查看器，支持多种文件格式，如 PDF、ODT、ODP、ODS、XML、SVG 和图片等。它可以轻松地嵌入网页中，为用户提供方便快捷的文档浏览体验。
本文将详细介绍如何使用 npm 包安装和使用 ViewerJS。
安装
使用 npm 包管理工具安装 ViewerJS：
npm install viewerjs
使用
引入 ViewerJS
在需要使用 ViewerJS 的 HTML 文件中引入 ViewerJS 样式和脚本文件：
<link href="node_modules/viewerjs/dist/viewer.min.css" rel="stylesheet"> <script src="node_modules/viewerjs/dist/viewer.min.js"></script>
注意：上述代码中的路径根据项目实际情况进行修改。
创建 ViewerJS 实例
在 HTML 文件中创建 ViewerJS 实例并传入相关参数：
-- -------------------- ---- -------
---- ------------------
--------
--- ----- - ----------------------------------
--- ------- - -
---- --------------------------
------- ------
-------- -
------- --
-------- --
--------- -----
------ -----
----- -----
----- ------
----- -----
----------- -----
------------ -----
--------------- -----
------------- -----
--
--
--- ------ - --- ------------- ---------
---------上述代码中的 url 参数是要显示文档的 URL。navbar 参数和 toolbar 参数用于控制 ViewerJS 的工具栏的显示与隐藏，具体参数说明请参考 ViewerJS 文档。
ViewerJS 事件
ViewerJS 提供了多种事件，可以让开发者在合适的时机对文档进行操作或响应用户的行为。以下示例展示如何监听 ViewerJS 的 ready、show 和 shown 事件：
-- -------------------- ---- -------
---- ------------------
--------
--- ----- - ----------------------------------
--- ------- - -
---- --------------------------
--
--- ------ - --- ------------- ---------
------------------ ---------- -
------------------- -- --------
---
----------------- ---------- -
--------------------- -- ----------
---
------------------ ---------- -
--------------------- -- --------
---
---------ViewerJS API
ViewerJS 还提供了一些 API 方法，可以通过 JavaScript 调用来控制文档的显示、缩放和翻页等功能。以下示例展示如何通过 JavaScript 调用 ViewerJS API 实现文档的放大、缩小和翻页：
-- -------------------- ---- -------
---- ------------------
------- ------------------------------
------- -------------------------------
------- ---------------------------------
------- ---------------------------------
--------
--- ----- - ----------------------------------
--- ------- - -
---- --------------------------
--
--- ------ - --- ------------- ---------
-------- -------- -
------------------
-
-------- --------- -
------------------
-
-------- ---------- -
--------------
-
-------- ---------- -
--------------
-
---------总结
通过本文的介绍，我们了解了如何使用 npm 包安装和使用 ViewerJS，并学习了如何监听 ViewerJS 的事件和调用 API 方法来控制文档的显示、缩放和翻页等功能。希望本文能对大家在前端开发中使用 ViewerJS 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34020