Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Renderless viewer #1397

Open
way5 opened this issue Aug 26, 2024 · 3 comments
Open

Renderless viewer #1397

way5 opened this issue Aug 26, 2024 · 3 comments

Comments

@way5
Copy link

way5 commented Aug 26, 2024

Hi everyone!
I was implementing renderless example of the following content:

 import ePub from 'epubjs/src/epub.js';

let currentSectionIndex = 0;
const book = ePub(};  // also tested with: const book = ePub(data, {openAs: 'binary'});

const req = new XMLHttpRequest();
req.open("GET", activeFile.src);
req.responseType = "arraybuffer";

req.onloadend = function (e: ProgressEvent) {
  const data = new Uint8Array(req.response);

  function display(item: number) {
    let section = book.section(item);
         if (section) {
             section.render().then(function (html: string) {
                 console.log(html);    // <--- html contains the whole document HTML instead of the book section
                 document.getElementById('viewer').innerHTML = html;
             });
         }
         return section;
     }

   book.open(data, "binary").then(function () {
       showLoader(false);
       display(currentSectionIndex);
   });
}
 req.send();
...
<body>
  <div id="viewer" class="scrolled"></div>
</body> 
...

The problem I am facing is that HTML which is being returned after render is actually the whole document. As I understand the above example is the only way to get section source generated.

Where am I mistaken?
@johnfactotum
Copy link
Contributor

A section is a full document. "Section" in Epub.js is a name for what is technically called a content document or a spine item. It's also commonly though somewhat inaccurately called a chapter.

@way5
Copy link
Author

way5 commented Aug 30, 2024

Right. It is clear to me what section is. However, the HTML which I am expecting to be section, in above example is the root page html. I mean the root page where the reader container element is, not the section/chapter.

@johnfactotum
Copy link
Contributor

Ah, I see...

Well, section.render() (without any arguments) only works if the section has a full URL, which is only the case when opening unarchived books (otherwise it will try to request the path within the archive as if it is a valid URL). So for archived books, you need to specify the request method:

section.render(book.load.bind(book)).the(html => { /* ... */ })

This was referenced Sep 1, 2024
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@way5 @johnfactotum