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

一个大不溜w

已于 2023-08-12 22:40:29 修改

阅读量3.2k

点赞数 1

分类专栏： javascript 文章标签： javascript 开发语言

于 2023-08-12 18:24:29 首次发布

本文链接：https://blog.csdn.net/weixin_72979483/article/details/132251765

版权

javascript 专栏收录该内容

4 篇文章

订阅专栏

epub.js是一个JavaScript库，允许在网页上无缝阅读EPUB电子书，支持跨平台、自定义和遵循EPUB标准。它提供了丰富的功能和交互性，以及良好的开发者体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用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>