标签：index text 无标题 js book rendition progress

用Epub.js引擎开发阅读器

• 实现功能
• • 使用node.js的npm安装epub.js引擎
  • script标签内的关键js代码

实现功能

   电子书解析渲染，获取文献封面，文献信息，获取阅读进度progress，高亮选中文本进而实现笔记功能。

使用node.js的npm安装epub.js引擎

npm install epubjs --save

script标签内的关键js代码

电子书解析和渲染，高亮文本（另外的dialog组件做笔记），获取文献信息，封面信息，上一页，下一页，更新进度等。

import Epub from 'epubjs'

export default {
  name: 'index',
  data () {
    return {
      drawer: false,
      infoDrawer: false,
      notesDrawer: false,
      direction: 'rtl',
      size: '400px',
      book: {},
      coverUrl: '',
      rendition: {},
      navigation: {},
      bookAvailable: false,
      metadata: {},
      notes: [],
      noteIndex: 0,
      dialogFormVisible: false,
      dialogNotesUpdate: '',
      progress: 0,
      selection: null
    }
  },
  mounted () {
    console.log('query: ', this.$route.query)
    this.showEpub()
  },
  methods: {
    updateProgress () {
      // 获得当前章节的百分比并设置 保留4位小数
      const currentLocation = this.book.rendition.currentLocation()
      this.progress = currentLocation.end.percentage.toFixed(6)
      console.log('updateProgress:', this.progress)
    },
    displayProgress (progress) {
      this.progress = progress
      // 获得cfi地址 // progress的范围: 0-1
      const location = progress > 0 ? this.book.locations.cfiFromPercentage(progress) : 0
      // 根据cfi地址渲染电子书
      this.book.rendition.display(location)
    },
    showNoteDialog (index) {
      this.noteIndex = index
      this.dialogFormVisible = true
      this.dialogNotesUpdate = this.notes[index].note
    },
    updateNotes (noteIndex) {
      this.notes[noteIndex].note = this.dialogNotesUpdate
    },
    addNotes (text) {
      this.$message.success('成功新增一条标记！')
      this.notes.push({'mark': text, 'note': ''})
    },
    confirmDelete (index) {
      this.notes.splice(index, 1)
      this.$message.success('删除成功！')
    },
    // 返回上一页（书架）
    goBack () {
      this.$router.go(-1)
    },
    // 根据链接跳转到指定位置
    jumpTo (href) {
      this.drawer = false
      this.rendition.display(href).then(() => {
        this.updateProgress()
      })
    },
    // 上一页
    prevPage () {
      if (this.rendition) {
        this.rendition.prev().then(() => {
          this.updateProgress()
        })
      }
    },
    // 下一页
    nextPage () {
      if (this.rendition) {
        this.rendition.next().then(() => {
          this.updateProgress()
        })
        // const location = percentage > 0 ? this.locations.cfiFromPercentage(percentage) : 0
        // this.rendition.display(location)
      }
    },
    showEpub () { // 电子书解析渲染
      this.book = new Epub(this.$route.query.bookUrl) // 生成Book对象
      // 获取文献信息
      this.book.loaded.metadata.then(metadata => {
        this.metadata = metadata
      })
      // 获取封面信息
      this.book.loaded.cover.then(cover => {
        this.book.archive.createUrl(cover).then(url => {
          this.coverUrl = url
        })
      })
      // 通过Book.renderTo生成Rendition对象
      this.rendition = this.book.renderTo('read', {
        width: window.innerWidth - 460,
        height: window.innerHeight - 130,
        method: 'default'
      })
      // Illustration of how to get text from a saved cfiRange
      let that = this
      this.rendition.on('selected', function (cfiRange, contents) {
        this.book.getRange(cfiRange).then(function (range) {
          if (range) {
            const text = range.toString()
            that.addNotes(text)
          }
        })
      })
      // Apply a class to selected text
      this.rendition.themes.default({
        '::selection': {
          'background': 'rgba(255,255,0, 0.3)'
        },
        '.epubjs-hl': {
          'fill': 'yellow', 'fill-opacity': '0.3', 'mix-blend-mode': 'multiply'
        }
      })
      // 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
        // 根据 progress 渲染电子书    // progress数值（0-1）小数
        this.displayProgress(0.0092)
        // 标记电子书为解析完毕状态
        this.bookAvailable = true
      })
    }
  }
}
</script>

标签：index,text,无标题,js,book,rendition,progress
来源： https://blog.csdn.net/qq_46348907/article/details/123198840

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。