Show epub book in browser using JavaScript

on Jun 19, 2022 11:44 PM

How to show epub book in same design as design available in epub book.

using VersOne.Epub;
using VersOne.Epub.Schema; 
string path = Server.MapPath("~/img/25707-spider-spider.epub");
EpubBook epubBook = EpubReader.ReadBook(path);
// Book's title
string title = epubBook.Title;
// Book's authors (comma separated list)
string author = epubBook.Author;
// Book's authors (list of authors names)
List<string> authors = epubBook.AuthorList;
// Book's cover image (null if there is no cover)
byte[] coverImageContent = epubBook.CoverImage;
if (coverImageContent != null)
    using (MemoryStream coverImageStream = new MemoryStream(coverImageContent))
        //Image coverImage = Image.FromStream(coverImageStream);
// Enumerating chapters
foreach (EpubNavigationItem chapter in epubBook.Navigation)
    // Title of chapter
    string chapterTitle = chapter.Title;
    // Nested chapters
    List<EpubNavigationItem> subChapters = chapter.NestedItems;
// Enumerating the whole text content of the book in the order of reading
foreach (EpubTextContentFile textContentFile in epubBook.ReadingOrder)
    // HTML of current text content file
    string htmlContent = textContentFile.Content;
// Book's content (HTML files, stlylesheets, images, fonts, etc.)
EpubContent bookContent = epubBook.Content;
// All images in the book (file name is the key)
Dictionary<string, EpubByteContentFile> images = bookContent.Images;
EpubByteContentFile firstImage = images.Values.First();
// Content type (e.g. EpubContentType.IMAGE_JPEG, EpubContentType.IMAGE_PNG)
EpubContentType contentType = firstImage.ContentType;
// MIME type (e.g. "image/jpeg", "image/png")
string mimeType = firstImage.ContentMimeType;
// Creating Image class instance from the content
using (MemoryStream imageStream = new MemoryStream(firstImage.Content))
    //Image image = Image.FromStream(imageStream);
    //Image image = Image.
// Cover metadata
if (bookContent.Cover != null)
    string coverFileName = bookContent.Cover.FileName;
    EpubContentType coverContentType = bookContent.Cover.ContentType;
    string coverMimeType = bookContent.Cover.ContentMimeType;
// All XHTML files in the book (file name is the key)
Dictionary<string, EpubTextContentFile> htmlFiles = bookContent.Html;
// All CSS files in the book (file name is the key)
Dictionary<string, EpubTextContentFile> cssFiles = bookContent.Css;
// Entire HTML content of the book
foreach (EpubTextContentFile htmlFile in htmlFiles.Values)
    string htmlContent = htmlFile.Content;
literal1.text+=htmlContent ;
// All CSS content in the book
foreach (EpubTextContentFile cssFile in cssFiles.Values)
    string cssContent = cssFile.Content;
// All fonts in the book (file name is the key)
Dictionary<string, EpubByteContentFile> fonts = bookContent.Fonts;
// All files in the book (including HTML, CSS, images, fonts, and other types of files)
Dictionary<string, EpubContentFile> allFiles = bookContent.AllFiles;
// EPUB OPF data
EpubPackage package = epubBook.Schema.Package;
// Enumerating book's contributors
foreach (EpubMetadataContributor contributor in package.Metadata.Contributors)
    string contributorName = contributor.Contributor;
    string contributorRole = contributor.Role;
// EPUB 2 NCX data
Epub2Ncx epub2Ncx = epubBook.Schema.Epub2Ncx;
// Enumerating EPUB 2 NCX metadata
foreach (Epub2NcxHeadMeta meta in epub2Ncx.Head)
    string metadataItemName = meta.Name;
    string metadataItemContent = meta.Content;
// EPUB 3 navigation
Epub3NavDocument epub3NavDocument = epubBook.Schema.Epub3NavDocument;
// Accessing structural semantics data of the head item
StructuralSemanticsProperty? ssp = epub3NavDocument.Navs.First().Type;


Download FREE API for Word, Excel and PDF in ASP.Net: Download
on Jun 22, 2022 04:15 AM
on Jun 22, 2022 04:16 AM

Hi mukesh1,

Using the Epub.js Reader library i have created the example.

You have to download the epub.js, reader.js and main.css file in order to use plugin which is required.

Refer below code.


<div id="main">
    <div id="titlebar">
        <div id="metainfo">
            <span id="book-title"></span>
            <span id="title-seperator">&nbsp;&nbsp;–&nbsp;&nbsp;</span>
            <span id="chapter-title"></span>
    <div id="divider"></div>
    <div id="prev" class="arrow">‹</div>
    <div id="viewer"></div>
    <div id="next" class="arrow">›</div>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="/Scripts/epub.js"></script>
<script type="text/javascript" src="/Scripts/reader.js"></script>
<link rel="stylesheet" href="CSS/main.css">
<script type="text/javascript">
    window.onload = function () {