使用epub.js解析epub文件

使用 epub.js 解析 EPUB 文件在 JavaScript 环境下可以非常方便，尤其是结合像 Astro.js 这样的现代框架。以下是一个简单的指导，帮助你在 Astro.js 项目中使用 epub.js 解析和展示 EPUB 文件。

步骤 1: 创建一个新的 Astro.js 项目

如果你还没有创建 Astro 项目，可以使用以下命令创建一个新的项目：

npm create astro@latest
cd your-project-name
npm install

步骤 2: 安装 `epub.js`

在项目目录中安装 epub.js：

npm install epubjs

步骤 3: 创建一个组件来显示 EPUB 文件

你可以创建一个新的 Astro 组件，例如 EpubViewer.astro，用来加载和显示 EPUB 文件。

---
import { onMount } from 'astro:client';
import Epub from 'epubjs';

const { src } = Astro.props;
let book, rendition;

onMount(async () => {
    book = Epub(src);

    // 读取EPUB文件
    await book.loaded;

    // 创建一个 Rendition，并指定要渲染 EPUB 的 HTML 元素
    const bookContainer = document.getElementById('book');
    rendition = book.renderTo(bookContainer, {
        width: '100%',
        height: '100%',
    });

    // 加载第一页
    rendition.display();
});
---

<div id="book" style="height: 500px; overflow: auto;"></div>

步骤 4: 在页面中使用 EpubViewer 组件

在你的页面中引用 EpubViewer 组件并传入一个 EPUB 文件的路径：

---
import EpubViewer from '../components/EpubViewer.astro';

const epubFilePath = '/path/to/your/book.epub'; // 替换为你的EPUB文件的路径
---

<html>
<head>
    <title>EPUB Viewer</title>
</head>
<body>
    <h1>EPUB Viewer</h1>
    <EpubViewer src={epubFilePath} />
</body>
</html>