刚开始使用 FuturePress/epub.js。并与 vue.js 一起使用
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="/static/epub.min.js"></script>
<script src="/static/libs/zip.min.js"></script>
</head>
<body>
<div id="app">
<div onclick="Book.prevPage();">‹</div>
<div id="area"></div>
<div onclick="Book.nextPage();">›</div>
</div>
<script src="script.js"></script>
</body>
在 script.js
中
var app = new Vue({
el: '#app',
created: function () {
this.$nextTick(function () {
var Book = ePub("http://desq.xyz/epub-test/book.epub");
Book.renderTo("area");
})
}
});
但是,发生了错误。 ReferenceError:未定义 ePub
。这是什么??
最佳答案
它可以与一些 mod 一起使用(我正在关注 epubjs 仓库中给出的示例)
对当前的
epub.min.js
使用 cdn(也许你没有正确设置/static 文件夹?)使用
jszip
,因为这是 epubjs 推荐的(zipjs 也可以)使用 Vue 的数据属性来保存
rendition
并将点击处理程序设置为方法。可能不是必需的,但如果没有它,您需要点击监听器,这是(更简单的)Vue 方式。使用了 epubjs 示例中的一本电子书,因为我不确定您尝试访问的是哪本。
这是一个有效的示例 index.html
。只需将代码粘贴到本地文件并使用浏览器打开即可。
index.html
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/epubjs/dist/epub.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
</head>
<body>
<div id="app">
<div @click="prev()">‹</div>
<div id="area"></div>
<div @click="next()">›</div>
</span>
<script>
var app = new Vue({
el: '#app',
data: {
book: null,
rendition: null
},
created() {
this.book = ePub("https://s3.amazonaws.com/epubjs/books/alice/OPS/package.opf");
this.rendition = this.book.renderTo("area", {width: 600, height: 400});
var displayed = this.rendition.display();
},
methods: {
prev() {
this.rendition.prev();
},
next() {
this.rendition.next();
}
}
});
</script>
</body>
关于javascript - ePub 未在 futurepress/epub.js 中定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49128203/