vue中epub电子书的配置

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>