epubjs的基本使用

epubjs的基本使用

• 说道epub文件，其实说白了就是个压缩包，包含html、css、img等内容。
• 使用epubjs依赖jszip库。通过传统方式引入勿要忘了引入jszip。
• 通过现代脚手架，npm等方式包管理安装epubjs无需关心这一点。

基本安装与使用

传统

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
<script src="../dist/epub.min.js"></script>

或者

npm install epubjs

加载电子书

import Epub, {
    Book } from "epubjs"
let book:Book = Epub();
// 路径引入
book.open('https:/xxx.xx/url/demo.epub');
book.open('/url/demo.epub');


// 选择文件 
const handleChangeFile = (e: any) => {
   
  var file = e.target.files[0];
  if (window.FileReader) {
   
    var reader = new FileReader();
    reader.onload = (r: any) => {
   
        // 加载二进制
      book.open(r.target.result, "binary");
    };
    reader.readAsArrayBuffer(file);
  }
}

// 除了地址 binary 还支持 "base64","epub","opf","json","directory"等。

渲染图书

book的位置可以使id选择器名称，也可以使element对象

// 滚动模式
book.renderTo("book", {
   
    width: 960,
    height:800,
    flow: "scrolled",
    allowScriptedContent: true,
});
// 默认执行下一页，追加下一页内容
// 增加 manager: "continuous", 滚动到底部自动追加下一页

// 分页
book.renderTo("book", {
   
    width: "100vw",
    height: "100vh", // 分页模式下 最好固定宽高
    flow: