1. 引入epubjs
yarn add epubjs
2. 页面中引入:
import ePub from 'epubjs'
3. 页面中目录和显示的div的代码
- <div id="nav">
- <a-select v-model="selCatalog" style="width:100%" @change="catalogChange">
- <a-select-option v-for="item in toc" :key="item.href" :value="item.href">{{item.label}}</a-select-option>
- </a-select>
- </div>
- <div id="viewer"></div>
4. 具体实现代码:
- this.book = ePub(epubUrl);
-
- this.rendition=this.book.renderTo("viewer", { // // 滚动模式
- width: 860,
- height:560,
- flow: "scrolled",
- allowScriptedContent: true,
- });
-
- this.book.ready.then(() => {
- this.toc = this.book.navigation.toc;
- this.rendition.display();
- });