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

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

相关推荐
gnip21 分钟前
链式调用和延迟执行
前端·javascript
SoaringHeart32 分钟前
Flutter组件封装:页面点击事件拦截
前端·flutter
杨天天.34 分钟前
小程序原生实现音频播放器,下一首上一首切换,拖动进度条等功能
前端·javascript·小程序·音视频
Dragon Wu44 分钟前
React state在setInterval里未获取最新值的问题
前端·javascript·react.js·前端框架
Jinuss44 分钟前
Vue3源码reactivity响应式篇之watch实现
前端·vue3
YU大宗师1 小时前
React面试题
前端·javascript·react.js
木兮xg1 小时前
react基础篇
前端·react.js·前端框架
ssshooter1 小时前
你知道怎么用 pnpm 临时给某个库打补丁吗?
前端·面试·npm
IT利刃出鞘2 小时前
HTML--最简的二级菜单页面
前端·html
yume_sibai2 小时前
HTML HTML基础(4)
前端·html