设置 epub.js答案

【问题标题】：Setting up epub.js设置 epub.js
【发布时间】：2018-09-16 09:59:56
【问题描述】：

任何使用 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>

感谢您的宝贵时间。

【问题讨论】：

通过命令安装 epubjs npm：npm i epubjs。然后结构代码与以下链接相同：stackoverflow.com/questions/52327839/…

标签： javascript epub epub.js

【解决方案1】：

这可能对您有所帮助为时已晚，但我希望它对其他人有所帮助。

首先，在我对 epub.js 的短暂体验中，我遇到了同样的问题，最终了解到，如果您想将 height 和 width 选项设置为 "100%"，如“获取已开始”您引用的自述文件上的指南，并且正如您在示例中使用的那样，您要渲染到的元素必须具有固定的高度。在您的情况下，#area div。尝试将 #area 的 CSS 设置为 height: 500px;，然后查看 epub 是否呈现。

这是一些内容更丰富的 epub.js 文档，但不是关于设置的：http://epubjs.org/documentation/0.3/#rendition

其次，这对你来说可能根本不是问题，我知道 README 指示引用 <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，问题更可能是高度/宽度值。

【讨论】：

【解决方案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。让它以“小于全屏”的方式正确渲染是非常棘手的。虽然可以做到。

【讨论】：

【解决方案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\/.*/,
        ])
    },
};

【讨论】：

【解决方案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>

希望这是有道理的。

【讨论】：

【解决方案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>

希望这会有所帮助。

【讨论】：

不幸的是，它不起作用：/我仍然没有渲染任何东西：/还是谢谢你:)
@Braisque 你需要 make var next 或 var previous 来获取 window.filereader

【解决方案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>

它应该可以工作。

【讨论】：