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

Edgywebsites
Shopify Partner
18 1 32

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.

edgywebsites.com
DARING.INNOVATIVE.CUTTING-EDGE.
Replies 8 (8)

pawankumar
Shopify Partner
423 42 75

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

- Need a Shopify developer? Chat on WhatsApp +91-9467121281
- Coffee Tip: Buymeacoffee  | Email: thepkpawankumar@gmail.com
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Best regards,
Pawan
Edgywebsites
Shopify Partner
18 1 32

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

edgywebsites.com
DARING.INNOVATIVE.CUTTING-EDGE.
pawankumar
Shopify Partner
423 42 75

To install it in theme, you can use CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.2.12/pdfobject.min.js" integrity="sha512-lDL6DD6x4foKuSTkRUKIMQJAoisDeojVPXknggl4fZWMr2/M/hMiKLs6sqUvxP/T2zXdrDMbLJ0/ru8QSZrnoQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
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!

- Need a Shopify developer? Chat on WhatsApp +91-9467121281
- Coffee Tip: Buymeacoffee  | Email: thepkpawankumar@gmail.com
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Best regards,
Pawan
Edgywebsites
Shopify Partner
18 1 32

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.

edgywebsites.com
DARING.INNOVATIVE.CUTTING-EDGE.

EasifyApps
Shopify Partner
456 11 35

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 🤗.

 

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

 

EasifyApps_0-1703127383574.png

 

EASIFY - MAKING SHOPIFY SIMPLE & SWEET!
Easify Product Options: Create custom product options 10X faster & easier!
Easify Product Attachments: Effortlessly add downloadable PDF files (or any other format) to Shopify pages!
Try for Free | 24/7 Live Chat Support
Edgywebsites
Shopify Partner
18 1 32

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

edgywebsites.com
DARING.INNOVATIVE.CUTTING-EDGE.
EasifyApps
Shopify Partner
456 11 35

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.

EASIFY - MAKING SHOPIFY SIMPLE & SWEET!
Easify Product Options: Create custom product options 10X faster & easier!
Easify Product Attachments: Effortlessly add downloadable PDF files (or any other format) to Shopify pages!
Try for Free | 24/7 Live Chat Support

Wayne35
New Member
6 0 0

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.

TITLEGRAM
➜ Where brands go to turn PDF files into high ROI webpages that build trust, engage better and sell more online.

Try now for free