【epub.js】開源中間件epub.js的使用及其中文api


 

epub是最流行的電子書規范之一,網絡上對於Java Web有不少合適的方法來解析和呈現,但是關於epub.js的介紹比較少(盡管github上已經2K星了),更多的是概念性的內容,如:

epub.js是支持跨多個設備的,在瀏覽器端渲染EPUB文件的JavaScript庫,提供通用的電子書功能界面(如渲染、持久和分頁)不需要開發專用的應用程序或插件。

具體用法因人而異,在此我介紹結合React使用的案例:

epub.js中間件封裝了解析epub文件的過程,ePubReader以控制器方式封裝了頁面動作響應。

以下是epub.js的官方文檔:

https://github.com/futurepress/epub.js/blob/master/documentation/README.md

2017.11.22更新:

如果使用ePubReader解析圖書,還想應用epub.js的API,需要以這種形式:

var reader = ePubReader("./book/"+newsid);//獲得解析圖書的實例
reader.book.on("book:ready",function(){alert('1')});//拿到book變量,然后就能使用epub.js的API了

原因是在ePubReader的源碼中:

ePubReader解析並沒有像epub.js一樣返回一個book對象,而是返回了reader對象,這個reader對象在上圖藍色標記處創建了自己的book對象,這個book對象又來自epub.js的Book對象,所以reader.book就是epub.js中的book了,拿到book以后其他用法和epub.js都一樣了。


 

方法:

ePub(bookPath, options) 

創建EPUB圖書實例:

bookPath可選參數,指定epub文件路徑,可以是網絡資源,也可以是本地資源。

var Book = ePub("url/to/book/"); // With default options
var Book = ePub({ restore: true }); 
Book.open("url/to/book/"); // Books can be opened later 

Options可選參數,配置解析參數

{
  bookPath : null,
  version: 1, // Changing will cause stored Book information to be reloaded
  restore: false, // Skips parsing epub contents, loading from localstorage instead
  storage: false, // true (auto) or false (none) | override: 'ram', 'websqldatabase', 'indexeddb', 'filesystem'
  spreads: true, // Displays two columns
  fixedLayout : false, //-- Will turn off pagination
  styles : {}, // Styles to be applied to epub
  width : false, //width和height可以設置圖書內容的寬和高,默認值是不設置,此時會填滿父窗口。
  height: false, 
}

解析圖書的更多方法:

Book.open(bookPath) 打開指定路徑的圖書,和構造函數的作用類似,只是將配置和解析的過程分開

var Book = ePub({ restore: true }); 
Book.open("url/to/book/"); // Books can be opened later 

也可以帶擴展名:

Book.open("url/to/book.epub");

Book.renderTo(element) 將解析好的圖書追加到某個HTML結點並渲染,此時epub圖書內容在HTML中呈現。(使用的是iframe標簽)

var Book = ePub("url/to/book/", { restore: true });

var $el = document.getElementById("div-id");
Book.renderTo($el);

參數也可以是字符串表示:

var Book = ePub("url/to/book/");
Book.renderTo("div-id");

Book.nextPage()

Book.prevPage()

在閱讀頁面中的翻頁控制函數,添加到按鈕事件函數:

<div onclick="Book.prevPage();">‹</div>
<div onclick="Book.nextPage();">›</div>

必須在渲染之后,才會響應翻頁。

Book.displayChapter(chap, end)   顯示指定章節:

加載指定的章節到頁面上,加載的是這一章的第一頁:

Book.displayChapter('/6/4[chap01ref]!/4[body01]/10');

第二個參數設置為true,將加載這一章的最后一頁:

Book.displayChapter(3, true);

Book.goto(url)跳轉到指定章節:

加載指定的章節(需要有pageMap)

var skip = Book.goto("chapter_001.xhtml");
skip.then(function(){
    console.log("On Chapter 1");
})

通常用來顯示一些帶有指定章節鏈接的表格

Book.setStyle(style, val, prefixed)設置圖書內容的樣式:

Book.setStyle("font-size", "1.2em");

Book.removeStyle(style)移除設置的樣式。

Book.destroy()刪除iframe和事件函數。

Promises

Book.getMetadata()在回調函數中獲取meta數據:

Book.getMetadata().then(function(meta){
    document.title = meta.bookTitle+""+meta.creator;
});

返回一個對象:

{
  "bookTitle": "The title of the book",
  "creator": "Book Author",
  "description": "The description/synopsis of the book",
  "pubdate": "",
  "publisher": "The Publisher",
  "identifier": "The ISBN",
  "language": "en-US",
  "rights": "Copyright text",
  "modified_date": "",
  "layout": "",
  "orientation": "",
  "spread": "",
  "direction": null
}

Book.getToc()在回調函數中獲取toc,是一個包含目錄結構的數組對象。

Book.getToc().then(function(toc){
    console.log(toc);
});

Book.generatePagination()進行分頁,可選參數為頁面大小:

book.generatePagination().then(function(toc){
    console.log("Pagination generated");
});
book.generatePagination(pageWidth, pageHeight).then(function(toc){
    console.log("Pagination generated");
});

響應的事件:

book:ready 

book:stored

book:online

book:offline

book:linkClicked

book.on('book:linkClicked', function(href) {
    console.log(href);
});

book:pageChanged

{
  anchorPage: 2
  percentage: 0.5
  pageRange: [1, 2, 3]
}
book.on('book:pageChanged', function(location){
    console.log(location.anchorPage, location.pageRange)
});

renderer:resized

renderer:chapterDisplayed

renderer:chapterUnloaded

renderer:locationChanged

book.on('renderer:locationChanged', function(locationCfi){ console.log(locationCfi) });

renderer:visibleRangeChanged

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM