刚开始使用 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 is not defined 。它是什么??

最佳答案

它适用于一些模组(我正在关注 epubjs 存储库中给出的示例)

  • 为当前的 epub.min.js 使用 cdn(也许您没有正确设置/static 文件夹?)
  • 使用 jszip,因为这是 epubjs 推荐的(zipjs 也可以工作)
  • 使用 Vue 的 data 属性来保存 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/

    10-13 00:28