javascript 设置epub.js

ncecgwcz 于 2023-02-02 发布在 Java

关注(0)|答案(7)|浏览(486)

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

谢谢你抽出时间。

JavaScript

来源：https://stackoverflow.com/questions/52352962/setting-up-epub-js

7条答案

按热度按时间

mzmfm0qo1#

这对你来说可能太晚了，但我希望这对其他人也有帮助。
首先，在我使用epub.js的短暂经历中，我曾努力解决过同样的问题，并最终了解到，如果要将height和width选项设置为"100%"，正如您所引用的README中的“Getting Started”指南所建议的那样，并且正如您在示例中所使用的那样，要呈现到的元素必须具有固定的高度。尝试将#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，问题更可能是高度/宽度值。

赞(0）回复(0）举报 2023-02-02

rur96b6h2#

你的html使用了epub.js demo完全正确...但是你没有考虑到epub.js很可能不在你要求的地方。
假设您的html位于
http://example.com/epubstuff/see-ebook.html
如果是这样，那么您需要将epub.js脚本上载到//example.com/dist/epub.js，以便../dist/epub.js找到js文件，从而可以进行呈现。
一旦你做到了这一点，你就进入了一个有趣的世界，试图预测epub.js将如何处理定义“区域”的css。让它在“不到全屏”的情况下正确渲染是非常棘手的，尽管这是可以做到的。

赞(0）回复(0）举报 2023-02-02

mccptt673#

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\/.*/,
        ])
    },
};

赞(0）回复(0）举报 2023-02-02

d7v8vwbk4#

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

希望你能理解。

赞(0）回复(0）举报 2023-02-02

dz6r00yl5#

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

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

希望这个有用。

赞(0）回复(0）举报 2023-02-02

umuewwlo6#

好的，这并不复杂。我也遇到过同样的问题，结果是<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>

应该会有用的。

赞(0）回复(0）举报 2023-02-02

wdebmtf27#

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

首先使用以下命令安装epubjs库npm i 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>

赞(0）回复(0）举报 2023-02-02

我来回答

javascript 设置epub.js

7条答案

相关问题

热门标签

最新问答