javascript 设置epub.js

ncecgwcz  于 2023-02-02  发布在  Java
关注(0)|答案(7)|浏览(472)

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

谢谢你抽出时间。

mzmfm0qo

mzmfm0qo1#

这对你来说可能太晚了,但我希望这对其他人也有帮助。
首先,在我使用epub.js的短暂经历中,我曾努力解决过同样的问题,并最终了解到,如果要将heightwidth选项设置为"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组件)中。
您可以在定义bookrendition变量(在您的示例中为console.log(book)console.log(rendition))后,通过控制台日志记录来检查是否加载了epub.js。如果它们是充满了您不熟悉的花哨函数的对象,您将知道页面上有epub.js,问题更可能是高度/宽度值。

rur96b6h

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。让它在“不到全屏”的情况下正确渲染是非常棘手的,尽管这是可以做到的。

mccptt67

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

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>

希望你能理解。

dz6r00yl

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>

希望这个有用。

umuewwlo

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>

应该会有用的。

wdebmtf2

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>

相关问题