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

尝试将库从标签主体移到标签头先生，

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

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

首先，在我使用epub.js的短暂经验中，我为相同的问题而苦恼，并最终了解到，如果您想将height和width选项设置为"100%"，就像您参考的自述文件的“入门”指南中所建议的一样，并且在示例中使用时，要渲染的元素必须具有固定的高度。您的情况是#area格。尝试将#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 install epubjs（如果使用npm）将其添加到项目中，然后使用{{将其导入相关文件（在我的情况下是Vue组件）） 1}}。

您可以在定义变量后检查控制台是否加载了epub.js（在示例中为import ePub from 'epubjs'或book，并记录您的rendition或console.log(book)变量）。如果它们是您不熟悉的，花哨的功能的对象，那么您会知道页面上有epub.js，问题很可能是高度/宽度值。

Answer 3

您的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 4

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 5

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

希望如此。

设置epub.js

5 个答案: