什么是 @universalviewer/uv-ebook-components？
@universalviewer/uv-ebook-components 是一个 npm 包，用于在 web 应用中展示 EPUB 和 PDF 电子书。该组件提供了主题、翻页控制、缩放、目录和搜索等功能，使得开发者能够将电子书嵌入到自己的 web 应用中，并且可自定义样式和布局等。
安装和使用
版本要求
要使用 @universalviewer/uv-ebook-components，需要 Node.js 12 或更高版本。
安装
可以通过 npm 安装 @universalviewer/uv-ebook-components：
npm install @universalviewer/uv-ebook-components
用例
-- -------------------- ---- -------
------ - --------- ------- - ---- ---------------------------------------
-- -- ---- ---
----- -------- - --- ----------
---------- -------
-------- -----------------------------
-------- ---------------
---
-- -- --- ---
----- ------- - --- ---------
---------- -------
-------- -----------------------------
-------- --------------
---可以将 EpubView 或 PdfView 组件实例化，然后传递给它们 container、baseUrl 和 bookUrl 等属性。
其中：
container：指定电子书展示区域的选择器，可以是 ID 选择器或者类选择器或者标签选择器。baseUrl：指定电子书资源的基础 URL，用于指定电子书的 CSS 和 font 文件所在的路径，一般情况下这是一个固定的地址。如果不指定，则使用当前页面的地址作为基础 URL。bookUrl：指定电子书的 URL，可以是相对路径、绝对路径或者网络绝对路径。
除此之外，还可以通过下面的方式来自定义主题和布局：
-- -------------------- ---- -------
----- -------- - --- ----------
---------- -------
-------- -----------------------------
-------- ---------------
--------- -
------ --------
----------- ------
--------- ---
----------- --------
----------- ----
-------- -
---- --
------ --
------- --
----- --
--
--
---
----- ------- - --- ---------
---------- -------
-------- -----------------------------
-------- --------------
--------- -
------------ -----
------------ -----
-------------- -----
-------------- -----
--------- -----
--
---可以传递 settings 对象来覆盖默认的选项，具体包含哪些选项可以参考 API 文档。
API 文档
@universalviewer/uv-ebook-components 提供了一些 API，以方便你根据需求来操作电子书。
EpubView 和 PdfView 公共 API
settings
-- -------------------- ---- -------
----- -------- - --- ----------
---------- -------
-------- -----------------------------
-------- ---------------
--------- -
------ --------
----------- ------
--------- ---
----------- --------
----------- ----
-------- -
---- --
------ --
------- --
----- --
--
--
---
-------------------------------
-- -- -
-- ------ --------
-- ----------- ------
-- --------- ---
-- ----------- --------
-- ----------- ----
-- -------- - ---- -- ------ -- ------- -- ----- - --
-- -settings 是一个对象，用于配置电子书的主题、布局等选项。具体包含哪些选项可以参考 API 文档。
setSettings(settings)
-- -------------------- ---- -------
----- -------- - --- ----------
---------- -------
-------- -----------------------------
-------- ---------------
---
----------------------
------ --------
----------- -----
--------- ---
----------- --------
----------- ----
-------- - ---- --- ------ --- ------- --- ----- -- --
---
-------------------------------
-- -- -
-- ------ --------
-- ----------- -----
-- --------- ---
-- ----------- --------
-- ----------- ----
-- -------- - ---- --- ------ --- ------- --- ----- -- --
-- -setSettings(settings) 方法可以用来动态设置 settings。
getSettings()
-- -------------------- ---- -------
----- -------- - --- ----------
---------- -------
-------- -----------------------------
-------- ---------------
---
----- -------- - -----------------------
----------------------
-- -- -
-- ------ ----------
-- ----------- ------
-- --------- ---
-- ----------- --------
-- ----------- ----
-- -------- - ---- -- ------ -- ------- -- ----- - --
-- -getSettings() 方法可以获取当前的 settings。
on(event, callback)
-- -------------------- ---- -------
----- -------- - --- ----------
---------- -------
-------- -----------------------------
-------- ---------------
---
--------------------- -- -- -
------------------------
---on(event, callback) 方法用于监听特定的事件。目前支持的事件有：
loaded：电子书加载完成时触发。resized：电子书大小调整时触发。rendered：电子书渲染完成时触发。destroyed：电子书销毁完成时触发。
off(event, callback)
-- -------------------- ---- -------
----- -------- - --- ----------
---------- -------
-------- -----------------------------
-------- ---------------
---
----- -------- - -- -- -
------------------------
--
--------------------- ----------
---------------------- ----------off(event, callback) 方法用于取消监听特定的事件。
destroy()
const epubView = new EpubView({
container: "#app",
baseUrl: "https://example.com/books/",
bookUrl: "example.epub",
});
epubView.destroy();destroy() 方法用于销毁组件，释放内存和资源。
EpubView 还有以下 API：
next()
const epubView = new EpubView({
container: "#app",
baseUrl: "https://example.com/books/",
bookUrl: "example.epub",
});
epubView.next();next() 方法用于翻到电子书的下一页。
prev()
const epubView = new EpubView({
container: "#app",
baseUrl: "https://example.com/books/",
bookUrl: "example.epub",
});
epubView.prev();prev() 方法用于翻到电子书的上一页。
goToPage(pageNumber)
const epubView = new EpubView({
container: "#app",
baseUrl: "https://example.com/books/",
bookUrl: "example.epub",
});
epubView.goToPage(10);goToPage(pageNumber) 方法用于直接跳转到指定页码的页面。
search(keyword)
const epubView = new EpubView({
container: "#app",
baseUrl: "https://example.com/books/",
bookUrl: "example.epub",
});
epubView.search("hello");search(keyword) 方法用于在电子书中搜索指定的关键字。
PdfView 还有以下 API：
zoomIn()
const pdfView = new PdfView({
container: "#app",
baseUrl: "https://example.com/books/",
bookUrl: "example.pdf",
});
pdfView.zoomIn();zoomIn() 方法用于将电子书放大一级。
zoomOut()
const pdfView = new PdfView({
container: "#app",
baseUrl: "https://example.com/books/",
bookUrl: "example.pdf",
});
pdfView.zoomOut();zoomOut() 方法用于将电子书缩小一级。
resetZoom()
const pdfView = new PdfView({
container: "#app",
baseUrl: "https://example.com/books/",
bookUrl: "example.pdf",
});
pdfView.resetZoom();resetZoom() 方法用于将电子书缩放恢复到原始大小。
结语
@universalviewer/uv-ebook-components 提供了将电子书嵌入到 web 应用中的方便和易用性。通过阅读本篇文章，你应该已经了解了如何安装和使用 npm 包，以及如何配置和自定义选项。如果你有更多问题，可以参考官方文档或者提出问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb549b5cbfe1ea0611409