使用epub.js解析epub文件，浏览器阅读电子书

Dear 丶 2023-10-14 18:39 10阅读 0赞

## 使用epub.js解析epub文件，浏览器阅读电子书 ##

#### epub.js是什么 ####

epub.js是一个JavaScript库，用于在网页上呈现和阅读EPUB电子书。它提供了一种方便的方式来打开、查看和导航EPUB文件，包括添加目录、页面跳转、显示内容等功能。EPUB是一种开放标准的电子书格式，适用于在多种设备和平台上阅读。epub.js使得在网页上阅读EPUB电子书变得简单和便捷。

#### epub.js优点 ####

epub.js具有以下一些优点：

\*\*跨平台和设备 \*\*：epub.js可以在各种设备和平台上运行，包括桌面、移动设备和Web浏览器。它不依赖于特定的操作系统或设备，使得EPUB电子书在不同的环境中都能够被准确呈现和阅读。

\*\*灵活性和扩展性 \*\*：epub.js是一个开源的JavaScript库，具有良好的灵活性和可扩展性。开发者可以根据需要自定义和扩展其功能，对EPUB电子书的呈现和交互进行定制。

**支持EPUB标准**：epub.js遵循EPUB标准，能够解析和呈现EPUB格式的电子书。它支持解压EPUB文件、解析OPF和HTML文件、提取元数据和目录等，为EPUB电子书的阅读和导航提供了全面的支持。

**强大的功能和交互性**：epub.js提供了丰富的功能和交互性，如目录导航、页面跳转、字体大小调整、书签管理等。它还支持多种阅读模式和主题样式，满足用户个性化的阅读需求。

\*\*开发者友好 \*\*：epub.js具有清晰的文档和示例代码，易于上手和使用。它还有一个活跃的开发社区，提供技术支持和更新维护，使开发者能够快速解决问题和获取最新的功能。

总之，epub.js是一个功能强大、灵活性高、跨平台的EPUB阅读器框架，为用户提供了优秀的阅读体验，并为开发者提供了丰富的定制和扩展的可能性。

#### 测试案例 ####

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>EPUB.js Demo</title>
        //引入epub需要的依赖的js库
        <script src="jquery.min.js"></script>
        <script src="jszip.min.js"></script>
        <script src="Blob.min.js"></script>
        <script src="deflate.min.js"></script>
        <script src="inflate.min.js"></script>
        <script src="epub.js"></script>
    	//让样式好看一点，使用bootstrap
        <link rel="stylesheet" href="bootstrap.min.css">
    
    </head>
    <style>
        *{
          
            margin: 0px;
            padding: 0px;
        }
        .botton_win{
          
            position:fixed;
            bottom: 0px;
            left: 40%;
        }
        .botton_win>button{
          
            width: auto;
            height: 25px;
            font-size: 18px;
        }
    </style>
    
    <body>
    <div style="width: 100%;">
    	//用来阅读电子书的div，书内容将显示其中
        <div id="read" style="width: 100%; height: auto;">
    
        </div>
    
    	//调节背景颜色和字体颜色的按钮
        <div style="width: 250px;margin: auto;padding-bottom: 10px;">
    
            背景色: <input type="color" id="backcolor" value="#ffffff" onchange="backcolor()" >
            字体颜色: <input type="color" id="textcolor" value="#000000" onchange="backcolor()">
    
        </div>
    	//电子书的基本操作上一页下一页 字体大小调节
        <div style="width: 450px;margin: auto;padding-bottom: 50px;">
            <button class="btn btn-primary" id="prevPageBtn">上一页</button>
            <button class="btn btn-primary" id="nextPageBtn">下一页</button>
    
            <button class="btn btn-primary" id="xiaofont">字体缩小</button>
            <button class="btn btn-primary" id="dafont">字体加大</button>
    
        </div>
    </div>
    
    <script>
    	//切换字体颜色与背景颜色
        function backcolor(){
          
        	//定义主题对象
            var zhuti = {
          
            	//主题名称
                name: "123",
                style: {
          
                    body: {
          
                    	//获取字体颜色
                        color:  $("#textcolor").val(),
                        //获取背景颜色
                        background: $("#backcolor").val(),
                    },
                },
            }
            //在themes 对象中注册主题
            themes.register(zhuti.name, zhuti.style);
            //通过主题名称直接使用主题
            themes.select(zhuti.name);
        }
    	
    	//初始字体大小
        var fontsize= 16;
    
    	//字体加大方法
        var dafont = document.getElementById("dafont")
        dafont.addEventListener("click", function () {
          
            fontsize = fontsize+1
            themes.fontSize(fontsize+"px")
        });
        //字体减小方法
        var xiaofont = document.getElementById("xiaofont")
        xiaofont.addEventListener("click", function () {
          
            fontsize = fontsize-1
            themes.fontSize(fontsize+"px")
        });
    
    
    	//获得上一页下一页按钮
        var prevPageBtn = document.getElementById("prevPageBtn");
        var nextPageBtn = document.getElementById("nextPageBtn");
    
    	//上一页方法
        prevPageBtn.addEventListener("click", function() {
          
            rendition.prev();
        });
    	//下一页方法
        nextPageBtn.addEventListener("click", function() {
          
            rendition.next();
    
        });
    
      	//创建ePub对象 参数为电子书文件路径，文件必须是epub格式
        var book = ePub("12977-Yuan Ding De Yi Nian.epub");
        // var book = ePub("12994-Shao Huo Gong.epub");
    
    	//初始化电子书 "read"是上面div的id名
        var rendition = book.renderTo("read", {
          
    
        });
    	//获取themes对象
        var themes = rendition.themes;
    
        rendition.display();
    
        book.ready.then(function () {
          
            var toc = book.navigation.toc;
        });
    </script>
    </body>
    </html>

#### 展示效果图 ####

![在这里插入图片描述][bde3c3392c1c46fd9c3536363f546413.png_pic_center]  
![在这里插入图片描述][36bcfdb13c284f0394bae7ee2a907eef.png_pic_center]

#### 获取资源文件 ####

百度网盘链接：[https://pan.baidu.com/s/1-6AjtLPNe3WJSPocV7i3cg][https_pan.baidu.com_s_1-6AjtLPNe3WJSPocV7i3cg]  
提取码：82eU

[bde3c3392c1c46fd9c3536363f546413.png_pic_center]: https://img-blog.csdnimg.cn/bde3c3392c1c46fd9c3536363f546413.png#pic_center
[36bcfdb13c284f0394bae7ee2a907eef.png_pic_center]: https://img-blog.csdnimg.cn/36bcfdb13c284f0394bae7ee2a907eef.png#pic_center
[https_pan.baidu.com_s_1-6AjtLPNe3WJSPocV7i3cg]: https://pan.baidu.com/s/1-6AjtLPNe3WJSPocV7i3cg