使用epubjs来读取本地epub文件

发表于 | 更新于 | 分类于

epub.js可以用来解析epub格式的电子书并渲染到网页上，GITHUB地址：https://github.com/futurepress/epub.js

1
2
3
4
5
6
<div id="area">
<script>
    var book = ePub("url/to/book/package.opf");
    var rendition = book.renderTo("area", {width: 600, height: 400});
    var displayed = rendition.display();
</script>

按照上面这个例子，如果是本地文件的话可能读取不到对应的opf或者epub文件，只能通过input + FileReader让文件以ArrayBuffer的形式传入。

1
2
3
4
5
6
7
8
9
10
var fileread = new FileReader();
//读取文件并且将一个包含文件内容的ArrayBuffer保存咋result属性中
fileread.readAsArrayBuffer(e.target.files[0]);
fileread.onload = function(e){
    var bookdata = e.target.result;
    book = ePub();
    book.open(bookdata);
    rendition = book.renderTo("area");
    rendition.display();
};

这时页面应该有了一个上传入口，传入epub格式文件后书籍的内容会在area区域渲染出来，还自带单双页自适应效果。官网的文档不怎么好读，但是例子给的挺多，都看看试试也就差不多了，一些基本的功能如翻页，章节导航。

章节导航（官网抄的）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
book.loaded.navigation.then(function(toc){
    select = document.getElementById("toc"),
    docfrag = document.createDocumentFragment();

    toc.forEach(function(chapter) {
        var option = document.createElement("option");
        option.textContent = chapter.label;
        option.ref = chapter.href;

        docfrag.appendChild(option);
    });

    select.appendChild(docfrag);

    select.onchange = function(){
        var index = select.selectedIndex,
        url = select.options[index].ref;
        rendition.display(url);
        return false;
    };

});

翻页（同上，抄的）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
rendition.on("keyup", keyListener);

next.addEventListener("click", function(e){
    rendition.next();
    e.preventDefault();
}, false);

prev.addEventListener("click", function(e){
    rendition.prev();
    e.preventDefault();
}, false);

var keyListener = function(e){

if ((e.keyCode || e.which) == 37) {
    rendition.prev();
}

if ((e.keyCode || e.which) == 39) {
    rendition.next();
}

};

document.addEventListener("keyup", keyListener, false);