ddkhanh / bookstack-pdf-viewer

Step by step to setup pdf-viewer for bookstack app

bookstack-pdf-viewer

Step by step to setup pdf-viewer for bookstack app

Step #1

Download PDFJS prebuilt version from https://mozilla.github.io/pdf.js/getting_started/#download Unzip the file to 'pdfjs' folder and move it to the BookStack app 'public' folder. Ensure both 'build' and 'web' folders and its files are there.

Step #2 configure bookstack

All the below steps assume that you are using docker for the bookstack deployment

2.1 copy the pdfjs folder to public folder

docker cp pdfjs bookstack:/app/www/public
docker exec -it bookstack bash
#This is a workaround step to fix an issue with web/viewer.html, it intends to include pdf.worker.js not pdf.worker.mjs
cd /app/www/public/pdfjs/build/
cp pdf.worker.mjs pdf.worker.js

2.2 Config nginx to treat the mjs file as javascript

All of the below steps should be executed in bookstack docker container

vi /etc/nginx/mime.types

Replace this line

From

application/javascript                           js;

To

application/javascript                           js mjs;

Then reload the nginx config

/usr/sbin/nginx -s reload

2.3 Copy and paste the following code to Custom HTML Head Content field on Settings page -> Customization

<script type="text/javascript">

  // ------------------- THIS SECTION ADDS A PDF BUTTON TO THE EDITOR TOOLBAR THAT ALLOWS YOU TO EMBED PDFS 

  // Use BookStack editor event to add custom "Insert PDF" button into main toolbar
  window.addEventListener('editor-tinymce::pre-init', event => {
      const mceConfig = event.detail.config;
      mceConfig.toolbar = mceConfig.toolbar.replace('link', 'link insertpdf')
  });

  // Use BookStack editor event to define the custom "Insert PDF" button.
  window.addEventListener('editor-tinymce::setup', event => {
    const editor = event.detail.editor;

    // Add PDF insert button
    editor.ui.registry.addButton('insertpdf', {
      tooltip: 'Insert PDF',
      icon: 'document-properties',
      onAction() {
        editor.windowManager.open({
          title: 'Insert PDF',
          body: {
            type: 'panel',
            items: [
              {type: 'textarea', name: 'pdfurl', label: 'PDF URL'}
            ]
          },
          onSubmit: function(e) {
            // Insert content when the window form is submitted
            editor.insertContent(`<iframe id="pdf-viewer" title="PDF viwer" src="/pdfjs/web/viewer.html?file=${e.getData().pdfurl}" width="100%" height="450vh"></iframe>`);
            e.close();
          },
          buttons: [
            {
              type: 'submit',
              text: 'Insert PDF'
            }
          ]
        });
      }
    });

  });
</script>

Insert PDF Button

Insert PDF Form input

Insert PDF Editor

PDF Viewer

Appendix

Persit changes

If you want to preserve the changes, which is helpful for those who want to regularly upgrade the BookStack image, please follow the instructions mentioned here

How to deal with problem on docker image update

Shadow effect

A small tweak if you want to strengthen the shadow to make the page appear closer to the reader and focus more on the content

<style>
.page-content clearfix {
 font-size: 14px;
}
#bkmrk-page-title {
    font-size: 35px;
}
.card {
    background-color: #fff;
    box-shadow: 0 20px 60px -1px rgba(0,0,0,.1);
    border-radius: 10px;
    border: 1px solid transparent;
}


.tri-layout-middle-contents {
    max-width: unset;
}
</style>

bookstack-pdf-viewer's Issues

EPUB Reader

Hello Team,

Thank you very much for this application.

Can we also have a way where we can view and embed epub reader documents?

Thank you.

Page not found

Hi,

Thank you so much for your solution! I really appreciated it. I have a problem, though. No matter what I insert in the PDF URL field, I always get a "Page Not Found" message. I am using v24.05.

Sizing the pdf integration

Hi,

First of all, thanks a lot for this resources, we are currently implementing this for our employee documentation and they really wanted a better pdf management.
This answers it more than perfectly and I could follow the installation as well as the update you made a few hours ago.

But I come across an issue which may not be fully related :

• When adding a pdf, the size is very small and I cannot really change that (see screenshots).
• If I try to extend it a lot, it grows more of large then of lengths and goes out of the border of the page

I might just be dumb on this one, and I first looked at pdf.js support but it doesn't seem to help. Maybe you have any hints ?

Also another question and again I'm sorry it might be out of this project. But any modification done to the pdf trough pdf.js is local to each user right ?

Thanks a lot again!
Best regards.

Problem on docker image update

Hello,

Everything works perfectly, just a problem with the lifecycle of this method. There was an update this weekend of the Docker image, and it overwrote the files and NGINX configuration. Do you have any idea how we could proceed to avoid any issues in the future? This time, I followed the procedure again, and everything is back to normal, but having the container on automatic update is not ideal!

Thank you very much.

File View Correction for Mobile/Responsive Display

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.

can access pdf other domain

hello,

can you try access pdf other domain like google drive