How can I embed a PDF file within a webpage without download?

Shopify Discussion
1

Hi guys,

I’m trying to embed a PDF file within a page so that it doesn’t need to be downloaded to be viewed. I tried js fallback from PDFobject.com but can’t seem to make it work as it needs a JS URL to a html page for JS fallback and can’t install the library with the theme. Any ideas/alternatives you’ve tried or successfully implemented? Much appreciated.

2

Hi @Edgywebsites
Have you tried putting PDF link in iframe ?
Thanks!

3

Yes, doesn’t work on mobile version of chrome. I think the js solution is the only one that works.

4

To install it in theme, you can use CDN

and to use it you can install in files and use URL in JS
DOC: https://pdfobject.com/
Please check if it is helpful
Thanks!

5

Thanks for your reply. The problem is in the js fallback option where it utilises pdfjs and that itself is a library of it’s own. In the example it points to a viewer.html file which acts as a reader. This is where I strugged.

6

Hi @Edgywebsites ,

I’d like to suggest another option for incorporating PDF files into your website. You can explore the free Easify Attachments app, which allows you to seamlessly add PDF files to your product page or other relevant pages on your site :hugs: .

Although it doesn’t display the PDF content directly on the page, it offers a user-friendly experience. When customers click on the file, it opens on a new page, eliminating the need for downloads and allowing them to easily view the content.

For a better understanding, here’s a quick demo:

pdf.png
pdf.png2174×1512 193 KB

EasifyApps_0-1703127383574.png
EasifyApps_0-1703127383574.png2880×1800 474 KB

7

Hi EasifyApps,

From your screenshots, it looks like it’s just chrome opening the PDF in a new tab. That’s the default behaviour, isn’t it?

Thanks,
S

8

Hi @Edgywebsites ,

Yes, clicking on the link will still open the file in a new tab. I understand your preference for a solution that incorporates the PDF directly into a frame, ensuring visibility from the start. Nevertheless, if the implementation of this feature proves to be complex, you might want to explore the option of utilizing the free Easify Product Attachments. This alternative also offers added convenience for customers.

9

If iframe doesn’t work for you, I would recommend using third party hosting service (Google Drive / Dropbox); as adding js / other script tend to complicate the page and would eventually become hard to maintain.

You can also try out Titlegram if you need something more professional, as you get a branded short URL (eg. zappublishing.title.is/guide) with the ability to update the PDF file without breaking the URL.