1.npm install epubjs --save
2.import ePub from 'epubjs';
3.// 在Vue组件的methods或created生命周期钩子中加载EPUB电子书
<template>
<div class="epub-reader">
<div id="viewer" class="epub-viewer"></div>
<!-- 翻页按钮 -->
<button @click="prev">上一页</button>
<button @click="next">下一页</button>
<!-- 进度条 -->
<div class="progress-bar">
<div class="progress" :style="{ width: progress + '%' }"></div>
</div>
<!-- 目录列表 -->
<div class="toc">
<ul>
<li v-for="item in toc" :key="item.href">
<a @click="goTo(item.href)">{{ item.label }}</a>
</li>
</ul>
</div>
</div>
</template>
<script>
import ePub from 'epubjs';
export default {
name: 'EpubReader',
data() {
return {
book: null,
rendition: null,
currentLocation: null,
progress: 0,
toc: [],
};
},
methods: {
initializeEpub() {
// 替换成你的EPUB电子书文件路径
const bookPath = '/path/to/your/book.epub';
this.book = ePub(bookPath);
this.rendition = this.book.renderTo('viewer', {
width: '100%',
height: '100%',
});
this.book.ready.then(() => {
this.toc = this.book.navigation.toc;
this.rendition.display();
});
this.rendition.on('relocated', (location) => {
this.currentLocation = location;
this.progress = location.start.percentage;
});
},
next() {
this.rendition.next();
},
prev() {
this.rendition.prev();
},
goTo(location) {
this.rendition.display(location);
},
},
mounted() {
this.initializeEpub();
},
};
</script>
<style>
/* 样式可以根据需求自行修改 */
.epub-reader {
position: relative;
width: 100%;
height: 100%;
}
.epub-viewer {
position: relative;
width: 100%;
height: 80%;
}
.progress-bar {
width: 100%;
height: 4px;
background-color: #ccc;
}
.progress {
height: 100%;
background-color: #007bff;
}
.toc {
position: absolute;
top: 80%;
left: 0;
width: 100%;
max-height: 20%;
overflow: auto;
background-color: #f8f8f8;
border-top: 1px solid #ccc;
padding: 10px;
}
.toc ul {
list-style: none;
padding: 0;
margin: 0;
}
.toc li {
margin-bottom: 5px;
}
.toc a {
text-decoration: none;
color: #007bff;
cursor: pointer;
}
.toc a:hover {
text-decoration: underline;
}
</style>
07-21
412

12-08
2675
