Vue使用epubjs电子书

npmjs: https://www.npmjs.com/package/epubjs

在线电子书转换器

安装:

javascript 复制代码
npm i epubjs

简单封装:

src/hooks/

javascript 复制代码
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 }
}

使用:

javascript 复制代码
<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>

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

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

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

更多可以参考另一位博主的文章:https://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

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

相关推荐
开开心心就好28 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享29 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君7 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js