There are a few chats and ideas about making uploaded documents work differently, which I 100% agree should happen, but for those folks who have been able to have a seperate upload space and then use iframes to bring the document or link out to them, I wanted to writeup how I use PDF.JS to achieve this and not require programming knowledge.
Why bother with this over a simple link or iframe direct the document? The main benefit is control. If you link out, this moves the user from where they were which can be confusing. If you just iframe the document in directly, it may work for you, but you are leaving the PDF display to the user’s browser and device. This leads to a varied experience for folks depending on browser and device, aka a support nightmare.
Disclaimers up front:
This is entirely based on your have access to some sort of external server (AWS S3, Azure Blob, Local Server etc will all work) for you to load documents onto. It needs to be able to run scripts (but you don’t need to know how to write them).Â
There are several frameworks that do this, I am just a fan of PDF.JS.Â
PDF.JS has a lot of abilities and controls, this is only going to cover the very basic setup.
The Process:
You need to do the following one time, and then you can share it for all your documents.
Unzip the package, and upload all the files to your server. Tip: I would make a dedicated directory or folder or bucket for this project, but up to you.
You need the URL to the ‘web’ folder you just uploaded. Add ‘viewer.html’ to the end of it.
So you should have something like: https://<YOURÂ DOMAIN AND PATH HERE>/web/viewer.html
If you use my package attached to here, it will load a default document that says ‘Loading...’. If you used the latest build from the website, it will have a sample sciencey article.
Make a note of this URL as it will be the base for later.
You are ready to now leverage this with all your documents.
Adding your Documents:
Upload your documents to the same domain that you loaded the previous package to above. They don’t need to be in the same directory, but it is easier.
You are going to add a URL variable to the end of your URL you created above. After the viewer.html, add: ?file=
Now we need to tell the viewer where the file to load is.Â
If the document is in the same directory as the above files, simply add the file name after the equal sign above, ?file=ExampleFile.pdf
If the document is in a different directory, you are going to need to use relative, encoded paths to get there. So for instance, in my example, the final document lives one level up from the viewer file. This is what my bucket looks like: To achieve this, my link looks like this: https://pdfjsdemo.s3.us-east-2.amazonaws.com/web/viewer.html?file=%2FPresentationExample.pdf
Note the %2f at the start of the file name. This is an encoded ‘/’ telling the viewer to move one level up to find the file named ‘PresentaitonExample.pdf’
Definitely google for some info on relative links if you are not sure what this all really means. Its a great concept to understand when working within Docebo anyways. Additionally, if you simply need to encode, heres a great tool to do it. https://www.url-encode-decode.com/
It is the same in all browsers, it is responsive, excellent. You can use this a straight link if you want, or you can take it a step further and embed it into Docebo using an iframe and any of the HTML content around Docebo.
You can edit and adjust your iframe as much as you want, but at its core simply:
