search

ddkhanh / bookstack-pdf-viewer

Step by step to setup pdf-viewer for bookstack app
8 stars 2 forks source link

File View Correction for Mobile/Responsive Display #5

Open Osarel opened 4 months ago

Osarel commented 4 months ago

Hey, thank you for your project! I use it on my personal wiki and it works pretty well.

I have an update to propose. When installed on my server, I noticed that the PDF can be resized using the BookStack resize function, but there is no way to make it responsive on phones and browsers. The solution I found is to update the line:

editor.insertContent('<iframe id="pdf-viewer" title="PDF viewer" src="/pdfjs/web/viewer.html?file=${e.getData().pdfurl}" width="100%" height="450vh"></iframe>');

to:

editor.insertContent(`<iframe id="pdf-viewer" title="PDF viewer" style="width: 100%; height: 70vh; max-height: 100vh;" src="/pdfjs/web/viewer.html?file=${e.getData().pdfurl}"></iframe>`);

This fix ensures that the PDF minimal 70vh and 100vh maximum screen height and 100% of the screen width.

Thank you have a good day.