Embedding PDF in Page (similar to images) with Plone 5.1.6

I've received a request to be able to embed a PDF inside a Page on our Plone 5.1.6 site. So, for example, you have a page that says:

Blah blah content content following the organizational structure shown here:

[orgchart.pdf]

Blah blah continuing with the rest of the page.

The pdf preview is then shown the same way an embedded image would be, and the user can click to download or open in their PDF viewer.

In initial searches, I came across PDF viewers for standalone files, which is what I believe collective.documentviewer, collective.pdfpeek, etc. do, allowing a user to read PDF and other document types as separate files. However, I couldn't see from their descriptions that any allowed you to embed in a page.

(In the past, my approach has been to just export an image of the PDF and embed that, then link that image to the file. However, the request was intended both to avoid the manual steps and to allow support for multi-page PDFs that could be either paged through in the embedded view or where each page would be automatically displayed as a series of embedded elements.)

Is there anything out there which does this (specifically on Plone 5.1.6)?

Perhaps use pdf.js? Injecting the related markup for pdf.js through a Plone viewlet or within your custom view (if you have one) appears straight forward.

Obviously you can also use other methods with pdf.js:

https://pdfobject.com/static/

Adding the related markup through TinyMCE might be possible if you adjust the HTML filtering settings in order to allow the related tags.

1 Like

Hmm. I've already adjusted the filtering to allow embedding for other reasons. I'll give this a shot! It looks simple enough. Thanks!

Okay, so reporting back for others -- this totally works. The "embed" version had troubles with saying that the PDF couldn't be found no matter how I expressed the URL, but if I uploaded the PDF to the same folder as the page in Plone and used just the filename with no path, both the "iframe" and "object" method worked well. The "object" seemed to size slightly better of the two.

Thank you!

3 Likes