Настройка epub.js - PullRequest
Новая
       34

Настройка epub.js

0 голосов
/ 16 сентября 2018

Любой, кто использует 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>

Спасибо за ваше время.

Ответы [ 3 ]

0 голосов
/ 30 января 2019

Это может быть слишком поздно, чтобы быть полезным для вас, но я надеюсь, что это будет полезно для других.

Во-первых, в моем коротком опыте с epub.js я боролся с тем же вопросом, и в конце концовузнал, что если вы хотите установить для параметров height и width значение "100%", как предлагается в руководстве «Приступая к работе» в README, на который вы ссылаетесь, и, как вы используете в своем примере, элемент, который вы отображаетедолжен иметь фиксированную высоту.В вашем случае, #area div.Попробуйте поэкспериментировать с настройкой CSS для #area в height: 500px; и посмотреть, будет ли рендерить epub.

Это несколько более информативная документация epub.js, но не совсем о настройке: http://epubjs.org/documentation/0.3/#rendition

Во-вторых, это может и не быть проблемой для вас, я знаю, что README инструктирует ссылку <script src="../dist/epub.min.js"></script> именно так, как вы это делаете, но для моих целей в приложении Rails 5.1 с Webpack это не сработало,

Вместо этого я добавил его в проект с помощью Yarn (yarn add epubjs или npm install epubjs, если вы используете npm), а затем импортировал его в соответствующий файл (в моем случае компонент Vue) с помощью import ePub from 'epubjs',

Вы можете проверить, загружены ли в epub.js консоль, регистрируя переменные book или rendition после их определения (console.log(book) или console.log(rendition), в вашем примере).Если это объекты, переполненные необычными функциями, которые вам не знакомы, вы будете знать, что у вас есть epub.js на странице, и проблема, скорее всего, в значениях высоты / ширины.

0 голосов
/ 12 мая 2019

ваш 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, который определяет «область».Чрезвычайно сложно заставить его правильно отображаться в режиме «меньше, чем на весь экран».хотя это МОЖЕТ быть сделано.

0 голосов
/ 16 сентября 2018

попробуйте переместить вашу библиотеку из тела тега в голову тега, сэр, 

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

Надеюсь, это поможет.

...