Javascript 设置epub.js_Javascript_Epub_Epub.js

Javascript 设置epub.js

javascript

Javascript 设置epub.js,javascript,epub,epub.js,Javascript,Epub,Epub.js,有人使用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> <scri

有人使用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>


var book=ePub（“my_ePub.ePub”）；
var rendition=book.renderTo（“area”，{method:“default”，width:“100%”，height:“100%”）；
var display=rendition.display（）；

谢谢您的时间。

尝试将您的库从标签主体移动到标签主体，先生

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


输入
...
...
var book=ePub（）；
格式副本；
var inputElement=document.getElementById（“输入”）；
...
...
...
...

希望这能有所帮助。

现在对你有所帮助可能太晚了，但我希望这能对其他人有所帮助

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

高度和宽度选项设置为“100%”
，如“入门”中所述参考自述文件指南，并且在示例中使用时，要渲染到的元素必须具有固定高度。在您的例子中，是#area
div。尝试将#area
的CSS设置为高度：500px，然后查看epub是否呈现
这是一些信息更丰富的epub.js文档，但并不是关于设置：
第二，这可能根本不是您的问题，我知道自述文件指示引用
，与您的情况完全相同，但就我而言，在带有Webpack的Rails 5.1应用程序中，这不起作用
相反，我用Thread将其添加到项目中（Thread add epubjs
，或者npm install epubjs
，如果您使用npm），然后使用import ePub from'epubjs'
将其导入到相关文件中（在我的例子中是一个Vue组件）
在定义变量后，您可以检查控制台是否已通过将您的book
或rendition
变量记录到epub.js中（console.log（book）
或console.log（rendition）
，在您的示例中）。如果这些对象充满了您不熟悉的奇特功能，您就会知道页面上有epub.js，问题更可能是高度/宽度值。您的html使用的是epub.js演示。。。但你没有想到EPUBJS很可能不是你要的。
假设您的html位于

如果是这样，那么您需要将epub.js脚本上载到//example.com/dist/epub.js，以便../dist/epub.js找到js文件，以便进行渲染
一旦你做到了这一点，你就可以进入一个有趣的世界，尝试预测epub.js将如何处理定义“区域”的css。要让它在“小于全屏”的情况下正确渲染是非常棘手的，尽管这是可以做到的
 按照FuturePress的说明，我也遇到了同样的问题
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\/.*/,
        ])
    },
};

首先，“../dist/epub.js”假定服务器上有此目录和文件。我希望你不会，因为它不起作用
第二，只有从托管epub的同一台服务器上运行HTML文件，我才能使我的自托管epub正常工作。不确定如果epub托管在另一台服务器上，为什么我无法加载它（可能是我错过的其他东西）。在任何情况下，我的HTML和EPUB文件的宿主类似于：

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

尝试对代码进行以下更改（JS文件引用和epub文件引用），看看是否有效（这对我来说很有效）：

var book=ePub（“http://www.example.com/libary/my-epub.epub");
var rendition=book.renderTo（“area”，{method:“default”，width:“100%”，height:“100%”）；
var display=rendition.display（）；

希望这是有意义的。
不幸的是，它不起作用：/I仍然没有渲染任何内容：/I无论如何谢谢：）@BRISKQUE您需要使var next或var PREVICE来获取window.FileReader通过命令安装epubjs npm:npm I epubjs。然后结构代码与以下链接相同：
<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>