epub.js的使用

npm安裝

npm install epubjs

epub閱讀器開發

ePub電子書解析和渲染

生成Book對象

  this.book = new Epub(DOWNLOAD_URL)

通過Book.renderTo生成Rendition對象

  this.rendition = this.book.renderTo('read', { width: window.innerWidth, height: window.innerHeight, method: 'default' }) 

通過Rendtion.display渲染電子書

  this.rendition.display() 

ePub電子書翻頁

上一頁

  function prevPage() { if (this.rendition) { this.rendition.prev() } } 

下一頁

  function nextPage() { if (this.rendition) { this.rendition.next() } } 

ePub電子書的字號設置和場景切換

設置主題

  function setTheme(index) { this.themes.select(this.themeList[index].name) this.defaultTheme = index } 

注冊主題

  function registerTheme() { this.themeList.forEach(theme => { this.themes.register(theme.name, theme.style) }) } 

設置字號大小

  function setFontSize(fontSize) { this.defaultFontSize = fontSize if (this.themes) { this.themes.fontSize(fontSize + 'px') } } 

ePub電子書生成目錄和定位信息

Book對象的鈎子函數ready

  this.book.ready.then(() => { // 生成目錄 this.navigation = this.book.navigation // 生成Locations對象 return this.book.locations.generate() }).then(result => { // 保存locations對象 this.locations = this.book.locations // 標記電子書為解析完畢狀態 this.bookAvailable = true }) 

ePub電子書通過百分比進行定位

function onProgressChange(progress) { const percentage = progress / 100 const location = percentage > 0 ? this.locations.cfiFromPercentage(percentage) : 0 this.rendition.display(location) } 

HTML5 range控件

<input class="progress" type="range" max="100" min="0" step="1" @change="onProgressChange($event.target.value)" @input="onProgressInput($event.target.value)" :value="progress" :disabled="!bookAvailable" ref="progress">

鏈接：https://www.jianshu.com/p/b923a50dbdc3
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。