试读部分无法正常显示？

Question

Answer 1

向往那片天空 2019-09-30 09:30:24

我也碰到这个问题了

Answer 2

Sam 2018-12-31 15:19:01

你好，请检查以下几个方面：

1、epubjs是否被正确引入

2、电子书是否被正确下载（epub文件或opf文件）

3、Book对象是否正确生成

this.book = new Epub(blob)

4、是否创建div并且指定id

5、Rendition对象是否被正确生成，并正确设置宽高

this.rendition = this.book.renderTo('read', {width:width, height:height})

6、是否调用display方法

this.rendition.display()

• 提问者 慕标3395159 #1

  有的呀，直接复制的老师仓库里的代码
  
  ```
  display (location) {
        console.log(location)
        if (this.$refs.preview) {
          if (!this.rendition) {
            console.log(window.innerWidth, window.innerHeight)
            this.rendition = this.book.renderTo('preview', {
              width: window.innerWidth > 640 ? 640 : window.innerWidth,
              height: window.innerHeight,
              methods: 'default'
            })
          }
          if (!location) {
            return this.rendition.display()
          } else {
            return this.rendition.display(location)
          }
        }
      },
  ```
  
  可是epubjs渲染出来的DOM .epub-view 高度为0.不知道什么情况，对比了BookReader里面的代码，感觉也没哪里遗漏呀，可是preview就是显示不出来

• Sam 回复 提问者 慕标3395159 #2

  你将电子书DOM的ref设置为preview了吗？

• 提问者 慕标3395159 回复 Sam #3

  有设置呀
  
  <div id="preview" v-show="this.displayed" ref="preview"></div>

点开查看后面7条评论