Javascript 如何在纯 HTML5/CSS/Jquery 中显示 epub 格式的书
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14562580/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I display epub format book in pure HTML5/CSS/Jquery
提问by Hyman
Is it possible to display epub format books in web browser using pure HTML5, CSS and Jquery? Could anybody please suggest how do I do this? I have to also make this responsive to be able to make it work on iPad. I know that but I don't know how do I read the epub using HTML and Javascript.
是否可以使用纯 HTML5、CSS 和 Jquery 在 Web 浏览器中显示 epub 格式的书籍？有人可以建议我该怎么做吗？我还必须使其具有响应性才能使其在 iPad 上运行。我知道，但我不知道如何使用 HTML 和 Javascript 阅读 epub。
The epub may contain some mathematical functions and I need to display them properly too.
epub 可能包含一些数学函数，我也需要正确显示它们。
回答by
Is it possible to display epub format books in web browser using pure HTML5, CSS and jQuery?
是否可以使用纯 HTML5、CSS 和 jQuery 在 Web 浏览器中显示 epub 格式的书籍？
Yes, it is possible.
对的，这是可能的。
Why do you want to write an epub reader? There are already many out there.
你为什么要写一个epub阅读器？已经有很多了。
In any case, your question is a specific form of the generic question, is is possible to write an an ebook reader for epubs? Obviously, yes it is, may have been written. If you can write it in one language or for one platform, you can write it in or for another.
无论如何，您的问题是通用问题的特定形式，是否可以为 epub 编写电子书阅读器？显然，是的，可能已经写好了。如果您可以用一种语言或为一个平台编写它，那么您就可以用另一种语言或为另一种语言编写它。
But actually, you don't even need to write a reader, since epubs are just little websites in a can. Unzip the epub file somewhere on your server, and navigate the browser to one of the pages. Voila, you're reading. You want a table of contents? Navigate to the toc.xhtml or equivalent file and there you go.
但实际上，您甚至不需要编写阅读器，因为 epub 只是罐头中的小网站。将 epub 文件解压缩到服务器上的某个位置，然后将浏览器导航到其中一个页面。瞧，你正在阅读。你想要一个目录？导航到 toc.xhtml 或等效文件，然后就可以了。
What about moving from one page to the next? You'll need to know what order the pages are supposed to be displayed in. Write a small server component which parses the file normally called content.opf, and based on the order of the files in the manifest element, emit some HTML which has a forward and back button and an iframe to show the content. While you're at it, parse out the title and other interesting metadata. All this is essentially what epubjs does.
从一页移动到下一页怎么样？您需要知道页面应该以什么顺序显示。编写一个小的服务器组件来解析通常称为 content.opf 的文件，并根据清单元素中文件的顺序，发出一些 HTML一个前进和后退按钮和一个 iframe 来显示内容。在此过程中，解析标题和其他有趣的元数据。所有这些本质上都是 epubjs 所做的。
But I intuit from your question that you want to do this entirely on the client/browser side. Well, that too has already been done, in the form of Readium, which you should take a look at. Use your favorite JS unzipping library (warning, can be slow) to unzip the epub file, and write a bit of JS to parse the metadata and throw up the pages, again most likely in iframes with some chrome around them.
但是我从您的问题中直觉到您想完全在客户端/浏览器端执行此操作。嗯，这也已经以 Readium 的形式完成了，您应该看看它。使用您最喜欢的 JS 解压缩库（警告，可能会很慢）来解压 epub 文件，并编写一些 JS 来解析元数据并抛出页面，同样很可能是在 iframe 中，周围有一些 chrome。
But what if you want paginated output, which people have come to expect from ebook readers? This is where things start to get hairy, and is probably a good place to step back and ask yourself once again why you're doing this. Anyway, if you decide you really want paginated display, then you're going to need to figure out some combination of logic involving windowing, framing, clipping, offsetting, and/or using "regions" to help you here. Some ebook readers just punt here, and say, what's wrong with scrolled/unpaginated output anyway?
但是，如果您想要分页输出，人们对电子书阅读器的期望是什么？这是事情开始变得棘手的地方，并且可能是退后一步并再次问自己为什么要这样做的好地方。无论如何，如果你决定你真的想要分页显示，那么你需要找出一些涉及窗口、框架、剪辑、偏移和/或使用“区域”的逻辑组合来帮助你。一些电子书阅读器只是在这里踢球，然后说，无论如何滚动/未分页的输出有什么问题？
But ebook readers do many other things. For instance, most would allow you to change line spacing, or margins, or font sizes. How do these user settings interact with the styling in the book's CSS files? Some readers take the approach of parsing the CSS (there are libraries for that too) and rewrite it to get the results you or your user wants.
但是电子书阅读器还可以做很多其他的事情。例如，大多数允许您更改行距、边距或字体大小。这些用户设置如何与本书 CSS 文件中的样式交互？一些读者采用解析 CSS 的方法（也有相关的库）并重写它以获得您或您的用户想要的结果。
Prefer an app instead of a browser app? Wrap the whole shebang in PhoneGap.
更喜欢应用程序而不是浏览器应用程序？将整个shebang 包裹在PhoneGap 中。
You're going to have to worry about many, many other things to make a competent reader. Just off the top of my head, that includes displaying the "guide" or "landmarks" some books specify, remembering reading location and user options from session to session, and probably providing some kind of bookshelf functionality.
你将不得不担心很多很多其他的事情，才能成为一个称职的读者。就在我的脑海中，这包括显示某些书籍指定的“指南”或“地标”，记住每次会话的阅读位置和用户选项，以及可能提供某种书架功能。
Although some client-side ebook readers do use jQuery, keep in mind that since epubs are HTML5/CSS2.5/JS, the content itself can only be reliably displayed by a modern browser. But if you have a modern browser, you don't need 90% of the hair in jQuery which is designed for cross-browser compatibility. You'd be better off with more lightweight components, such as Backbone and/or Underscore. You probably don't even need a selector library, since you'll have querySelector.
尽管一些客户端电子书阅读器确实使用 jQuery，但请记住，由于 epub 是 HTML5/CSS2.5/JS，因此内容本身只能由现代浏览器可靠地显示。但是如果你有一个现代浏览器，你不需要 jQuery 中 90% 的头发，它是为跨浏览器兼容性而设计的。您最好使用更轻量级的组件，例如 Backbone 和/或 Underscore。您可能甚至不需要选择器库，因为您将拥有 querySelector。
Good luck!
祝你好运！
回答by Peter Krauss
For scientific papers (journal articles), there are a "best solution" to simulating EPUB reader at browser. It can use XML (JATS) or XHTML (from EPUB) content. The PubReaderuse features and functions that are available in HTML5 and CSS3.
对于科学论文（期刊文章），有一个“最佳解决方案”可以在 browser 模拟 EPUB 阅读器。它可以使用 XML ( JATS) 或 XHTML (来自 EPUB) 内容。该PubReader使用的特性和功能，这些功能在HTML5和CSS3提供。
With CSS and Javascript it implements the formatting, paging, navigation, and text reflowing. The entire article is loaded into the browser as a single HTML page, and handles paging, etc. locally. See:
它使用 CSS 和 Javascript 实现格式设置、分页、导航和文本重排。整篇文章作为单个 HTML 页面加载到浏览器中，并在本地处理分页等。看：
PS: PubReader is similar to the @torazaburo suggestion, the EPUB-Readium browser interface.
PS：PubReader 类似于@torazaburo 建议，EPUB-Readium 浏览器界面。
