当前位置: 首页 > news >正文

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 在线电子书转换器 安装&#xff1a; npm i epubjs 简单封装&#xff1a; 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库中的两种回归模型&#xff0c;用于拟合和预测连续型目标变量。 决策树是一种基于树结构的机器学习算法&…...

__attribute__((__used__)) 和 __attribute__((__section__(“*“ “*“)))的使用

见&#xff1a;haproxy代码 C语言注册函数和调用函数&#xff0c;便于模块化开发和编程。 #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 命令主要分为三类&#xff1a; 数据操作语言 &#xff08;DML&#xff09;DML 语句可用于请求记录 &#xff08;SELECT&#xff09;、添加记录 &#xff08;INSERT&#xff09;、删除记录 &#xff08;DELETE&#xff09; 和修改现有记录 &#xff…...

Flink的API分层、架构与组件原理、并行度、任务执行计划

Flink的API分层 Apache Flink的API分为四个层次&#xff0c;每个层次都提供不同的抽象和功能&#xff0c;以满足不同场景下的数据处理需求。下面是这四个层次的具体介绍&#xff1a; CEP API&#xff1a;Flink API 最底层的抽象为有状态实时流处理。其抽象实现是Process Functi…...

Transformer:开源机器学习项目,上千种预训练模型 | 开源日报 No.66

huggingface/transformers Stars: 113.5k License: Apache-2.0 这个项目是一个名为 Transformers 的开源机器学习项目&#xff0c;它提供了数千种预训练模型&#xff0c;用于在文本、视觉和音频等不同领域执行任务。该项目主要功能包括&#xff1a; 文本处理&#xff1a;支持…...

Corel VideoStudio 会声会影2024剪辑中间的视频怎么删 剪辑中音乐太长怎么办

我很喜欢视频剪辑软件Corel VideoStudio 会声会影2024&#xff0c;因为它使用起来很有趣。它很容易使用&#xff0c;但仍然给你很多功能和力量。视频剪辑软件Corel VideoStudio 会声会影2023让我与世界分享我的想法&#xff01;“这个产品的功能非常多&#xff0c;我几乎没有触…...

数据结构初阶---复杂度的OJ例题

复杂度的OJ例题 一、消失的数字1.思路一2.思路二3.思路三 二、旋转数组1.思路一2.思路二3.思路三 一、消失的数字 数组nums包含从0到n的所有整数&#xff0c;但其中缺了一个。请编写代码找出那个缺失的整数。你有办法在O(N)时间内完成吗&#xff1f; 链接&#xff1a;力扣&…...

Prometheus|云原生|grafana的admin用户密码重置备忘记录

很久很久以前部署的一个Prometheus套装里的grafana密码给忘记了&#xff0c;回忆总是很痛苦&#xff0c;因此还是在这里简单的记录一下&#xff0c;下次就不需要满世界反翻找了。 一&#xff0c; 改库重置密码为admin grafana密码存放在哪里的&#xff1f; 必须说明一下&am…...

[hive]中的字段的数据类型有哪些

Hive中提供了多种数据类型用于定义表的字段。以下是Hive中常见的数据类型&#xff1a; 布尔类型&#xff08;Boolean&#xff09;&#xff1a;用于表示true或false。 字符串类型&#xff08;String&#xff09;&#xff1a;用于表示文本字符串。 整数类型&#xff08;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是一个很好的技术博客&#xff0c;里面信息很丰富&#xff0c;我也喜欢在csdn上做技术笔记。 但是CSDN体量太大&#xff0c;文章质量良莠不齐。当在搜索引擎搜索技术问题时&#xff0c;搜索结果中CSDN的内容占比太多&#xff0c;导致难以从其他优秀的博客平台中获取信息。因…...

Linux开发工具的使用(vim、gcc/g++ 、make/makefile)

文章目录 一 &#xff1a;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 中&#xff0c;一个完整的数据存储过程总共有 4 步&#xff0c;分别是&#xff1a;创建数据库、确认字段、创建数据表、插入数据。 要先创建一个数据库&#xff0c;而不是直接创建数据表&#xff1a;从系统架构的层次上看&#xff0c;MySQL 数据库系统从大到…...

Python赋值给另一个变量且不改变原变量

Python赋值给另一个变量且不改变原变量 在Python中&#xff0c;如果你想将一个变量的值赋给另一个变量&#xff0c;同时保持原变量不变&#xff0c;你可以使用复制&#xff08;copy&#xff09;而不是引用&#xff08;reference&#xff09;。Python中的变量通常是通过引用&…...

PHP进销存ERP系统源码

PHP进销存ERP系统源码 系统介绍&#xff1a; 扫描入库库存预警仓库管理商品管理供应商管理。 1、电脑端手机端&#xff0c;手机实时共享&#xff0c;手机端一目了然。 2、多商户Saas营销版 无限开商户&#xff0c;用户前端自行注册&#xff0c;后台管理员审核开通 3、管理…...

npm i 报错:Cannot read properties of null (reading ‘refs‘)

问题: 旧项目要更改东西&#xff0c;重新部署上线的时候&#xff0c;发现页面显示有异常。当时在开发环境是没有问题的。后经排查是一个引入swiper的页面报错了&#xff0c;只要注释掉swiper插件&#xff0c;就没问题了&#xff0c;但这肯定是不行的。 原因&#xff1a; npm和…...

C#学习中关于Visual Studio中ctrl+D快捷键(快速复制当前行)失效的解决办法

1、进入VisualStudio主界面点击工具——>再点击选项 2、进入选项界面后点击环境——>再点击键盘&#xff0c;我们可用看到右边的界面的映射方案是VisualC#2005 3、 最后点击下拉框&#xff0c;选择默认值&#xff0c;点击之后确定即可恢复ctrlD的快捷键功能 4、此时可以正…...

银河E8,吉利版Model 3:5米大车身、45寸大屏、首批8295座舱芯

作者 | Amy 编辑 | 德新 吉利银河E8在曝光后多次引爆热搜&#xff0c;李书福更是赞誉有加&#xff0c;称其为「买了就直接享受」。这款备受瞩目的车型于 10月30日晚首次亮相。 虽然新车外观在今年上海车展上早已曝光&#xff0c;但这次的发布会却带来了不少惊喜。新车架构以及…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》

引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

c++ 面试题(1)-----深度优先搜索(DFS)实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

关于 WASM:1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...