Show epub book in browser using JavaScript

mukesh1
 
on Jun 19, 2022 11:44 PM
273 Views

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);
    }
}
 
// TABLE OF CONTENTS
 
// Enumerating chapters
foreach (EpubNavigationItem chapter in epubBook.Navigation)
{
    // Title of chapter
    string chapterTitle = chapter.Title;
 
    // Nested chapters
    List<EpubNavigationItem> subChapters = chapter.NestedItems;
}
 
// READING ORDER
 
// 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;
}
 
 
// CONTENT
 
// Book's content (HTML files, stlylesheets, images, fonts, etc.)
EpubContent bookContent = epubBook.Content;
 
 
// IMAGES
 
// 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;
}
 
// HTML & CSS
 
// 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;
} 
 
// OTHER 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;
 
 
// ACCESSING RAW SCHEMA INFORMATION
 
// 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
dharmendr
 
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.

https://github.com/futurepress/epubjs-reader/

https://github.com/futurepress/epub.js

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

Refer below code.

HTML

<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>
    </div>
    <div id="divider"></div>
    <div id="prev" class="arrow">‹</div>
    <div id="viewer"></div>
    <div id="next" class="arrow">›</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></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 () {
        ePubReader("https://s3.amazonaws.com/epubjs/books/alice.epub");
    };
</script>

Screenshot