设置 epub.js

Question

任何使用 epub.js 或能够理解所谓的“文档”的人https://github.com/futurepress/epub.js?

我的代码有什么问题？我已一步步按照文档进行操作...我缺少什么？

<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
            <script src="../dist/epub.min.js"></script>
<script>
  var book = ePub("my_epub.epub");
  var rendition = book.renderTo("area", { method: "default", width: "100%", height: "100%" });
  var displayed = rendition.display();
</script>


<div id="area"></div>

<body>

感谢您的宝贵时间。

Answer 1

这可能对你来说已经太晚了，但我希望对其他人有帮助。

首先，在我使用 epub.js 的短暂经验中，我一直在努力解决同样的问题，并最终了解到，如果您想将

height

和

width

选项设置为

"100%"

，如“入门”中的建议您引用的自述文件中的指南，并且正如您在示例中使用的那样，您要渲染的元素必须具有固定的高度。在你的情况下，

#area

div。尝试将

#area

的 CSS 设置为

height: 500px;

，然后查看 epub 是否会呈现。

这是信息更丰富的 epub.js 文档，但并不是真正关于设置：http://epubjs.org/documentation/0.3/#rendition

其次，这对你来说可能根本不是问题，我知道自述文件指示完全按照你的方式引用

<script src="../dist/epub.min.js"></script>

，但就我在带有 Webpack 的 Rails 5.1 应用程序中的目的而言，这不起作用。

相反，我使用 Yarn 将其添加到项目中（

yarn add epubjs

，如果使用 npm，则为

npm install epubjs

），然后使用

import ePub from 'epubjs'

将其导入相关文件（在我的例子中是 Vue 组件）。

您可以在定义

book

或

rendition

变量后通过控制台记录它们（在您的示例中为

console.log(book)

或

console.log(rendition)

）来检查是否已加载 epub.js。如果它们是充满您不熟悉的奇特函数的对象，您就会知道页面上有 epub.js，并且问题更可能是高度/宽度值。

Answer 2

您的 html 完全使用了 epub.js 演示...但您没有考虑到 epub.js 很可能不是您要求的地方。

假设您的 html 位于

http://example.com/epubstuff/see-ebook.html

如果是这样，那么您需要将 epub.js 脚本上传到 //example.com/dist/epub.js，以便 ../dist/epub.js 找到 js 文件并进行渲染。

完成此操作后，您就可以进入尝试预测 epub.js 将如何处理定义“区域”的 css 的有趣世界。要让它在“小于全屏”的情况下正确渲染是非常棘手的。尽管这是可以做到的。

Answer 3

Add the following in metro.config.js

const blacklist = require('metro-config/src/defaults/blacklist');

module.exports = {
    resolver: {
        blacklistRE: blacklist([
            /node_modules\/.*\/node_modules\/react-native\/.*/,
        ])
    },
};

Answer 4

我按照 FuturePress 说明遇到了同样的问题。

首先，“../dist/epub.js”假设您的服务器上有此目录和文件。我希望你不会，因为它不起作用。

其次，只有当我从托管 epub 的同一服务器上运行 HTML 文件时，我才能使我的自托管 epub 正常工作。不知道为什么我无法加载 epub，如果它托管在另一台服务器上（也许是我错过了其他东西）。无论如何，我的 HTML 和 EPUB 文件的托管方式如下：

example.com/book.html
example.com/libary/my-epub.epub

尝试对您的代码进行这些更改（JS 文件引用和 epub 文件引用），看看它是否有效（这对我有用）：

<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/epubjs/dist/epub.min.js"></script>
<script>
  var book = ePub("http://www.example.com/libary/my-epub.epub");
  var rendition = book.renderTo("area", { method: "default", width: "100%", height: "100%" });
  var displayed = rendition.display();
</script>
    
<div id="area"></div>

</body>

希望这是有道理的。

Answer 5

尝试将您的库从标签主体移至标签头，先生，

<!DOCTYPE html>
<html>
<head>
  <title>Input</title>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
  <script src="../dist/epub.js"></script>

  <link rel="stylesheet" type="text/css" href="examples.css">

</head>
<body>
  <div id="title"><input type="file" id="input"></div>
  ...
  ...

  <script>
  var book = ePub();
  var rendition;
  var inputElement = document.getElementById("input");
  ...
  ...

  <script>
...
...
</body>
</html>

希望这有帮助。

Answer 6

好吧，没那么复杂。我遇到了同样的问题，结果发现

<div id="area"></div>

应该放在最后一个

<script>...</script>

标签之前。否则会在render函数中报空值异常。

因此将代码更改为：

<body>
   <div id="area"></div>
<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
<script src="../dist/epub.min.js"></script>
<script>
  var book = ePub("my_epub.epub");
  var rendition = book.renderTo("area", { method: "default", width: "100%", height: "100%" });
  var displayed = rendition.display();
</script>

它应该可以工作。

Answer 7

如果你在 Angular 中使用 epubjs 库，那么你必须做以下事情

首先使用以下命令安装 epubjs 库 npm 我 epubjs
将以下行添加到index.html的head标签中

<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>

将 epub.min.js 添加到您的 dist 文件夹中
将 epub.min.js 的文件路径添加到 angular.json 文件中，如下所示

     "scripts": [
              "dist/epub.min.js"
            ]

你的 html 应该是这样的

    <!doctype html>
    <html lang="en">

    <head>
      <meta charset="utf-8">
      <title>NarratureApp</title>
      <base href="/">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">

      <!-- epub start -->
      <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>
      <!-- epub end -->

      <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    </head>

    <body class="mat-typography">

       <button type="button" class="btn btn-success btn-sm" onclick="myFunction()">Read now</button><br><br>

      <div id="frame">
        <div id="area"></div>
        <a id="prev" href="#prev" class="arrow">‹</a>
        <a id="next" href="#next" class="arrow">›</a>
      </div> 

      <script>
        function myFunction() {
          var book = ePub("https://s3.amazonaws.com/moby-dick/moby-dick.epub");
          var rendition = book.renderTo("area", {
        width: "100%",
        height: 600,
          });

          var displayed = rendition.display();

          // Navigation loaded
          book.loaded.navigation.then(function (toc) {
        console.log(toc);
          });

          var next = document.getElementById("next");
          next.addEventListener("click", function () {
        rendition.next();
          }, false);

          var prev = document.getElementById("prev");
          prev.addEventListener("click", function () {
        rendition.prev();
          }, false);
        }
      </script>

      <app-root></app-root>
    </body>

    </html>

Answer 8

首先确保 epubjs 的 src 路径是正确的。

然后将 option key method:"default" 更改为 manager: "default"。

我知道在文档中他们将此属性命名为方法，但如果您检查类型文件夹中的源代码，它是管理器。

我不知道他们怎么会犯这个错误。

也许他们在某些版本中更改了属性，但忘记更改文档。

设置 epub.js

问题描述投票：0回答：8

8个回答

最新问题

设置 epub.js

问题描述 投票：0回答：8

8个回答

最新问题

问题描述投票：0回答：8