Vue使用epubjs电子书

 npmjs: https://www.npmjs.com/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: 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>

这个示例电子书地址: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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/133441.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

火山引擎云原生存储加速实践

在火山引擎相关的业务中绝大部分的机器学习和数据湖的算力都运行在云原生 K8s 平台上。云原生架构下存算分离和弹性伸缩的计算场景&#xff0c;极大的推动了存储加速这个领域的发展&#xff0c;目前业界也衍生出了多种存储加速服务。但是面对计算和客户场景的多样性&#xff0c…

CSS 滚动捕获 Scroll Snap

CSS 滚动捕获 Scroll Snap CSS 滚动捕获允许开发者通过声明一些位置(或叫作捕获位置)来创建精准控制的滚动体验. 通常来说轮播图就是这种体验的例子, 在轮播图中, 用户只能停在图 A 或者图 B, 而不能停在 A 和 B 的中间. 比如平时用淘宝或小红书, 当你上滑到下一个推荐内容时…

wpf Grid布局详解 `Auto` 和 `*` 是两种常见的设置方式 行或列占多个单元格,有点像excel里的合并单元格。使其余的列平均分配剩余的空间

比如只有行的界面 <Window x:Class"GenerateTokenApp.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schemas.microsoft.com/exp…

YOLO目标检测——红绿灯检测数据集【含对应voc、coco和yolo三种格式标签】

实际项目应用&#xff1a;红绿灯检测数据集在自动驾驶、交通安全监控、智能交通系统、交通流量监测和驾驶员辅助系统等领域都有广泛应用的潜力数据集说明&#xff1a;红绿灯检测数据集&#xff0c;真实场景的高质量图片数据&#xff0c;数据场景丰富&#xff0c;含有国内红绿灯…

Zeus IoT : 基于 SpringBoot 的分布式开源物联网大数据平台

Zeus IoT 是一个集设备数据采集、存储、分析、观测为一体的开源物联网平台&#xff0c;全球首创基于 Zabbix 的物联网分布式数据采集架构&#xff0c;具备超百万级物联网设备的并发监控能力&#xff0c;真正具备工业级性能与稳定性的开源物联网大数据中台。 Zeus IoT 致力于让设…

快速实现一个企业级域名 SSL 证书有效期监控巡检系统

Why 现在对于企业来说&#xff0c;HTTPS 已经不是可选项&#xff0c;已经成为一个必选项。HTTPS 协议采用 SSL 协议&#xff0c;采用公开密钥的技术&#xff0c;提供了一套 TCP/IP 传输层数据加密的机制。SSL 证书是一种遵守 SSL 协议的服务器数字证书&#xff0c;一般是由权威…

Rust编程基础核心之所有权(下)

1.变量与数据交互方式之二: 克隆 在上一节中, 我们讨论了变量与数据交互的第一种方式: 移动, 本节将介绍第二种方式:克隆。 如果我们 确实 需要深度复制 String 中堆上的数据&#xff0c;而不仅仅是栈上的数据&#xff0c;可以使用一个叫做 clone 的通用函数。 看下面的代码…

Mac苹果电脑分辨率修改管理 安装SwitchResX 完美解决

SwitchResX for Mac是一款Mac应用程序&#xff0c;可帮助您更好地管理和控制显示器分辨率和其他显示设置。使用SwitchResX&#xff0c;您可以创建自定义分辨率、旋转屏幕、调整显示器色彩配置等。 1. 自定义分辨率&#xff1a;SwitchResX允许用户创建自定义的屏幕分辨率&#…

程序设计:C++ 多进程、多线程原理和一个多进程、多线程框架

并发编程和异步编程是程序员的基本技能&#xff0c;各种高级语言也开发出了一些高级但晦涩的机制&#xff08;比如C#的await/async&#xff09;。并发编程主要是指多进程、多线程和交替执行&#xff0c;异步编程则是指多个并发执行任务之间的交互。 目录 并发和异步的技术介绍…

VSCode设置中文语言界面(VScode设置其他语言界面)

一、下载中文插件 二、修改配置 1、使用快捷键 CtrlShiftP 显示出搜索框 2、然后输入 configure display language 3、点击 (中文简体) 需要修改的语言配置 三、重启 四、可能出现的问题 1、如果configure display language已经是中文配置&#xff0c;界面仍是英文 解决&a…

VinsFusion排坑指南

Ubuntu18.04Cere 下载1.14.0版本。Ceres安装方法参考vinsfusion的docker fileOpenCV相关报错 参考 https://wenda.ncnynl.com/article/5CV_LOAD_IMAGE_GRAYSCALE 改成 cv::IMREAD_GRAYSCALE 在三个CMakeLists文件中指定opencv的版本&#xff1a; find_package(OpenCV 3.2.0 REQ…

C++成长之路

看好的发展方向&#xff1a; 证券行业软件开发、AI自动化开发、桌面端工具类开发&#xff0c;云桌面技术 产品框架搭建 MFCDuilbLibcef Qt 技术深入 熟知编译器原理 C11/14等新知识的学习 泛型编程 / 模板编程 设计模式 多线程并发 多进程通讯 各种锁及其优缺点 必看书…

css进阶知识点速览

0前言 零基础部分的博客 1选择器进阶 1.1后代选择器 作用&#xff1a;根据html标签的嵌套关系&#xff0c;选择父元素后代中满足条件的元素 选择器语法&#xff1a;选择器1 选择器2 {css} 结果&#xff1a; 在选择器1所找到标签的后代中 注意&#xff1a; 后代包括&#xf…

python 视频硬字幕去除 内嵌字幕去除工具 vsr

项目简介 开源地址&#xff1a;https://github.com/YaoFANGUK/video-subtitle-remover Video-subtitle-remover (VSR) 是一款基于AI技术&#xff0c;将视频中的硬字幕去除的软件。 主要实现了以下功能&#xff1a; 无损分辨率将视频中的硬字幕去除&#xff0c;生成去除字幕后…

java高级之单元测试、反射

1、Junit测试工具 Test定义测试方法 1.被BeforeClass标记的方法,执行在所有方法之前 2.被AfterCalss标记的方法&#xff0c;执行在所有方法之后 3.被Before标记的方法&#xff0c;执行在每一个Test方法之前 4.被After标记的方法&#xff0c;执行在每一个Test方法之后 public …

Xcode15 framework ‘CoreAudioTypes‘ not found

Xcode15遇见"framework ‘CoreAudioTypes’ not found。" 可尝试移除CoreAudioTypes&#xff0c;添加CoreAudio。 CoreAudio是CoreAudioTypes的套壳。 CoreAudio/CoreAudioTypes.h头文件内容 /*CoreAudio/CoreAudioTypes.h has moved to CoreAudioTypes/CoreAudi…

MFC发送http https以及json解析

域名解析成IP char szWeb[128] "www.baidu.com";struct hostent *pHost NULL;pHost gethostbyname(szWeb);//完成主机名到域名的解析char *IP inet_ntoa(*((struct in_addr *)pHost->h_addr));CString ipStr IP;请求三部曲&#xff1a; 1、CInternetSession…

Java学习路线指南

有很多想自学Java或者转行Java的会有很多疑问&#xff0c;笔者在此进行总结。 有很多想自学Java或者转行Java的会有很多疑问&#xff0c;笔者在此进行总结。 Java岗位多&#xff0c;容易找到工作。Java工资天花板高&#xff0c;比如&#xff1a;Java架构师、Java技术总监。Java…

线上JAVA应用平稳运行一段时间后出现JVM崩溃问题 | 京东云技术团队

一、问题是怎么发现的 系统是一个定时任务系统&#xff0c;需要定时执行业务代码&#xff0c;业务代码主要是访问MYSQL数据库和缓存进行操作&#xff0c;该开始启动&#xff0c;系统日志一切正常&#xff0c;但是运行一段时间到凌晨后&#xff0c;系统就自动崩溃了&#xff0c…

取消elementUI中table的选中状态和勾选状态赋值

一、取消所有选中 1、表格上绑定ref 2、清空用户选中数据 this.$refs.loopRef.clearSelection()二、勾选状态赋值 获取数据&#xff0c;flag为true则是选中状态&#xff0c;并将前面勾选框设为选中状态 this.listData.forEach(item> {if(row.flag1){this.$refs.loopRef.to…