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
写的相对更详细一些,也可以看着源码调用对应方法来实现对应功能。
相关文章:
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…...
python机器学习——决策树
决策树 # 模块导入 from sklearn.tree import ExtraTreeRegressor as ETR, DecisionTreeRegressor as DTRExtraTreeRegressor和DecisionTreeRegressor是scikit-learn库中的两种回归模型,用于拟合和预测连续型目标变量。 决策树是一种基于树结构的机器学习算法&…...
__attribute__((__used__)) 和 __attribute__((__section__(“*“ “*“)))的使用
见:haproxy代码 C语言注册函数和调用函数,便于模块化开发和编程。 #include <stdio.h>#ifdef __APPLE__ #define HA_SECTION(s) __attribute__((__section__("__DATA, " s))) #define HA_SECTION_START(s) __asm("…...
webgoat-(A1)SQL Injection
SQL Injection (intro) SQL 命令主要分为三类: 数据操作语言 (DML)DML 语句可用于请求记录 (SELECT)、添加记录 (INSERT)、删除记录 (DELETE) 和修改现有记录 ÿ…...
Flink的API分层、架构与组件原理、并行度、任务执行计划
Flink的API分层 Apache Flink的API分为四个层次,每个层次都提供不同的抽象和功能,以满足不同场景下的数据处理需求。下面是这四个层次的具体介绍: CEP API:Flink API 最底层的抽象为有状态实时流处理。其抽象实现是Process Functi…...
Transformer:开源机器学习项目,上千种预训练模型 | 开源日报 No.66
huggingface/transformers Stars: 113.5k License: Apache-2.0 这个项目是一个名为 Transformers 的开源机器学习项目,它提供了数千种预训练模型,用于在文本、视觉和音频等不同领域执行任务。该项目主要功能包括: 文本处理:支持…...
Corel VideoStudio 会声会影2024剪辑中间的视频怎么删 剪辑中音乐太长怎么办
我很喜欢视频剪辑软件Corel VideoStudio 会声会影2024,因为它使用起来很有趣。它很容易使用,但仍然给你很多功能和力量。视频剪辑软件Corel VideoStudio 会声会影2023让我与世界分享我的想法!“这个产品的功能非常多,我几乎没有触…...
数据结构初阶---复杂度的OJ例题
复杂度的OJ例题 一、消失的数字1.思路一2.思路二3.思路三 二、旋转数组1.思路一2.思路二3.思路三 一、消失的数字 数组nums包含从0到n的所有整数,但其中缺了一个。请编写代码找出那个缺失的整数。你有办法在O(N)时间内完成吗? 链接:力扣&…...
Prometheus|云原生|grafana的admin用户密码重置备忘记录
很久很久以前部署的一个Prometheus套装里的grafana密码给忘记了,回忆总是很痛苦,因此还是在这里简单的记录一下,下次就不需要满世界反翻找了。 一, 改库重置密码为admin grafana密码存放在哪里的? 必须说明一下&am…...
[hive]中的字段的数据类型有哪些
Hive中提供了多种数据类型用于定义表的字段。以下是Hive中常见的数据类型: 布尔类型(Boolean):用于表示true或false。 字符串类型(String):用于表示文本字符串。 整数类型(Intege…...
第六章 树【数据结构和算法】【精致版】
第六章 树【数据结构和算法】【精致版】 前言版权第六章 树6.1 应用实例6.2 树的概念6.2.1树的定义与表示6.2.2 树的基本术语6.2.3树的抽象数据类型定义 6.3 二叉树6.3.1二叉树的定义6.3.2 二叉树的性质6.3.3 二叉树的存储 6.4 二叉树的遍历6.4.1 二叉树的遍历及递归实现**1-二…...
第九章:Dynamic Symbolic Execution
文章目录 Dynamic Symbolic Executionoverviewmotivationdynamic symbolic execution常用的其他技术对比Random Testingsymbolic executionCombined static and symbolic - Dynamic Execution (DSE)step1: 初始化两个具体的值 x,ystep2: 根据定义得出 z 的 concrete value 和 s…...
在搜索引擎中屏蔽csdn
csdn是一个很好的技术博客,里面信息很丰富,我也喜欢在csdn上做技术笔记。 但是CSDN体量太大,文章质量良莠不齐。当在搜索引擎搜索技术问题时,搜索结果中CSDN的内容占比太多,导致难以从其他优秀的博客平台中获取信息。因…...
Linux开发工具的使用(vim、gcc/g++ 、make/makefile)
文章目录 一 :vim1:vim基本概念2:vim的常用三种模式3:vim三种模式的相互转换4:vim命令模式下的命令集- 移动光标-删除文字-剪切/删除-复制-替换-撤销和恢复-跳转至指定行 5:vim底行模式下的命令集 二:gcc/g1:gcc/g的作用2:gcc/g的语法3:预处理4:编译5:汇编6:链接7:函…...
MySQL(10):创建和管理表
基础知识 在 MySQL 中,一个完整的数据存储过程总共有 4 步,分别是:创建数据库、确认字段、创建数据表、插入数据。 要先创建一个数据库,而不是直接创建数据表:从系统架构的层次上看,MySQL 数据库系统从大到…...
Python赋值给另一个变量且不改变原变量
Python赋值给另一个变量且不改变原变量 在Python中,如果你想将一个变量的值赋给另一个变量,同时保持原变量不变,你可以使用复制(copy)而不是引用(reference)。Python中的变量通常是通过引用&…...
PHP进销存ERP系统源码
PHP进销存ERP系统源码 系统介绍: 扫描入库库存预警仓库管理商品管理供应商管理。 1、电脑端手机端,手机实时共享,手机端一目了然。 2、多商户Saas营销版 无限开商户,用户前端自行注册,后台管理员审核开通 3、管理…...
npm i 报错:Cannot read properties of null (reading ‘refs‘)
问题: 旧项目要更改东西,重新部署上线的时候,发现页面显示有异常。当时在开发环境是没有问题的。后经排查是一个引入swiper的页面报错了,只要注释掉swiper插件,就没问题了,但这肯定是不行的。 原因: npm和…...
C#学习中关于Visual Studio中ctrl+D快捷键(快速复制当前行)失效的解决办法
1、进入VisualStudio主界面点击工具——>再点击选项 2、进入选项界面后点击环境——>再点击键盘,我们可用看到右边的界面的映射方案是VisualC#2005 3、 最后点击下拉框,选择默认值,点击之后确定即可恢复ctrlD的快捷键功能 4、此时可以正…...
银河E8,吉利版Model 3:5米大车身、45寸大屏、首批8295座舱芯
作者 | Amy 编辑 | 德新 吉利银河E8在曝光后多次引爆热搜,李书福更是赞誉有加,称其为「买了就直接享受」。这款备受瞩目的车型于 10月30日晚首次亮相。 虽然新车外观在今年上海车展上早已曝光,但这次的发布会却带来了不少惊喜。新车架构以及…...
CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型
CVPR 2025 | MIMO:支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题:MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者:Yanyuan Chen, Dexuan Xu, Yu Hu…...
JavaScript 中的 ES|QL:利用 Apache Arrow 工具
作者:来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗?了解下一期 Elasticsearch Engineer 培训的时间吧! Elasticsearch 拥有众多新功能,助你为自己…...
vscode(仍待补充)
写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh? debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...
解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八
现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet,点击确认后如下提示 最终上报fail 解决方法 内核升级导致,需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...
【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多,如何一步解决,采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集(每个目录代表一个类别,目录下是该类别的所有图片),你需要进行以下配置步骤&#x…...
如何理解 IP 数据报中的 TTL?
目录 前言理解 前言 面试灵魂一问:说说对 IP 数据报中 TTL 的理解?我们都知道,IP 数据报由首部和数据两部分组成,首部又分为两部分:固定部分和可变部分,共占 20 字节,而即将讨论的 TTL 就位于首…...
React---day11
14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store: 我们在使用异步的时候理应是要使用中间件的,但是configureStore 已经自动集成了 redux-thunk,注意action里面要返回函数 import { configureS…...
用机器学习破解新能源领域的“弃风”难题
音乐发烧友深有体会,玩音乐的本质就是玩电网。火电声音偏暖,水电偏冷,风电偏空旷。至于太阳能发的电,则略显朦胧和单薄。 不知你是否有感觉,近两年家里的音响声音越来越冷,听起来越来越单薄? —…...
C++使用 new 来创建动态数组
问题: 不能使用变量定义数组大小 原因: 这是因为数组在内存中是连续存储的,编译器需要在编译阶段就确定数组的大小,以便正确地分配内存空间。如果允许使用变量来定义数组的大小,那么编译器就无法在编译时确定数组的大…...
【Go语言基础【12】】指针:声明、取地址、解引用
文章目录 零、概述:指针 vs. 引用(类比其他语言)一、指针基础概念二、指针声明与初始化三、指针操作符1. &:取地址(拿到内存地址)2. *:解引用(拿到值) 四、空指针&am…...
