任何人使用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>
谢谢你抽出时间。
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,问题更可能是高度/宽度值。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。让它在“不到全屏”的情况下正确渲染是非常棘手的,尽管这是可以做到的。
mccptt673#
d7v8vwbk4#
按照FuturePress的说明,我也遇到了同样的问题。
首先,'../dist/epub.js'假设您的服务器上有这个目录和文件,我希望您没有,因为它不工作。
第二,只有当我在我的epub所在的服务器上运行HTML文件时,我才能让我的自托管epub工作。不知道为什么我不能让epub加载,如果它托管在另一个服务器上(也许是我错过了其他东西)。在任何情况下,我的HTML和EPUB文件托管如下:
尝试对代码进行以下更改(JS文件引用和epub文件引用),看看是否有效(我的做法有效):
希望你能理解。
dz6r00yl5#
尝试将您的库从标签主体移动到标签头,先生,
希望这个有用。
umuewwlo6#
好的,这并不复杂。我也遇到过同样的问题,结果是
<div id="area"></div>
应该放在最后一个<script>...</script>
标签之前。否则它会在render函数中报告一个空值异常。因此,将代码更改为:
应该会有用的。
wdebmtf27#
如果你在angular中使用epubjs库,那么你必须做以下事情