Vue使用epubjs电子书

 npmjs:  .npmjs /package/epubjs 

在线电子书转换器

安装： 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: Book let rendition: Rendition function 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) return if(typeof element === 'string') { rendition = book.renderTo(element, options) } else { rendition = book.renderTo(element, options) } return rendition } function display() { if(!rendition) return return 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>

这个示例电子书地址： example-files.online-convert /ebook/epub/example.epub 

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

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

更多可以参考另一位博主的文章： blog.csdn.net/qq_42484429/article/details/93158645?ops_request_misc=&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

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