epub.js电子书的使用及VUE注意事项

epub电子书

EPub是什么？EPub怎么打开？EPub是电子书格式，可以用Adobe Digital Editions打开，它是一个自由的开放标准，属于一种可以“自动重新编排”的内容，也就是文字内容可以根据阅读设备的特性，以最适于阅读的方式显示。EPub档案内部使用了XHTML或DTBook(一种由DAISY Consortium提出的XML标准)来展现文字、并以zip压缩格式来包裹档案内容。EPub格式中包含了数位版权管理(DRM)相关功能可供选用。机客手机小书童是非常优秀的手机电子书压制工具，可以方便的制作EPUB、TXT、UMD等多种格式的电子书。

用程序来加载epub文件的话，也是可以的，就跟视频文件一样，前端客户端多种语言都能解析它。今天分享的主题是用epub.js来操作电子书文件。

先来看下效果：

写H5或PC的HTML代码的话，只需引入这2个js文件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/epubjs@0.3.88/dist/epub.js"></script>

然后来看一下相对简单的dom结构：

接下来是epub.js：

第一步，创建epub图书实例：

var book = ePub("张学良传.epub");
console.log(book)

book的所有属性：

Book的所有方法：

第二步，调用renderTo方法渲染页面：

第三步，控制下一页和上一页：

第四步，目录相关：

book.loaded.navigation.then(function (toc) {
    console.log('toc：', toc);
});

第五步：封面图、meta信息相关：

以上就是H5版本的epub了，不过当今主流还是vue版本的，下面是vue的一些注意事项：

1、安装：npm install epubjs xmldom jszip

2、导入：import Epub from ‘epubjs’

3、上传epub文件成功后的回调里，var book = new Epub(‘oss地址’) //本地、网络地址均可

4、获取meta、封面图、章节等均是Promise对象（异步编程的一种解决方案，可以获取到异步的操作），需要使用.then()方法来获取里面想要的信息。

5、通过then获取到的封面图，是本地blob图片，如上上张图最后一行。本地blob图片是无法上传至oss的。所以需要先把本地blob图片转为blob对象，再把blob对象转为base64图片，就可以传至oss了。

结束。