Vue使用epubjs电子书

电子书"/>

Vue使用epubjs电子书

 npmjs:  

在线电子书转换器

安装：

npm i epubjs

简单封装： 

 src/hooks/

import Epub from "epubjs";
import type { Book, Rendition } from 'epubjs'
import type { BookOptions } from 'epubjs/types/book'
import type { RenditionOptions } from 'epubjs/types/rendition'export function useEpub() {let book: Booklet rendition: Renditionfunction createBook(urlOrData?: string | ArrayBuffer, options?: BookOptions) {if(!urlOrData) {book = Epub(options)} else {book = Epub(urlOrData, options)}return book}function render(element: Element | string, options?: RenditionOptions) {if(!book) returnif(typeof element === 'string') {rendition = book.renderTo(element, options)} else {rendition = book.renderTo(element, options)}return rendition}function display() {if(!rendition) returnreturn rendition.display()}function getBook() {return book}function getRendition() {return rendition}return { createBook, render, display, getBook, getRendition }
}

使用： 

<template><div class="main"><div id="epub"></div><div class="btn"><button @click="pre">pre</button><button @click="next">next</button></div></div>
</template>
<script setup lang="ts">
import { useEpub } from '../hooks'
import { onMounted } from 'vue'const { createBook, render, display, getRendition } = useEpub()onMounted(() => {createBook('static/example.epub')render('epub', { width: '100%', height: '100%' })display()
})// 上一页
const pre = async () => {await getRendition().prev()
}// 下一页
const next = async () => {await getRendition().next()
}
</script>
<style scoped>
.main {width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;
}.main > #epub {width: 500px;height: 500px;border: 1px dashed red;box-sizing: border-box;
}
.main .btn {display: flex;justify-content: space-between;margin-top: 5px;
}
.main .btn button {padding: 7px 15px;margin-left: 20px;
}
</style>

这个示例电子书地址：.epub 

直接下载下来，放在public/static下。

这篇只是简单写一下使用，还没有正式用到

更多可以参考另一位博主的文章：=&request_id=&biz_id=102&utm_term=vue%E4%BD%BF%E7%94%A8epubjs&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-2-93158645.142^v96^pc_search_result_base9&spm=1018.2226.3001.4187

写的相对更详细一些，也可以看着源码调用对应方法来实现对应功能。