Displaying a pdf in browser

Design help General
1

Has anyone figured out how to get a pdf to display fully on a page. Not as a link to the pdf but I want the have a landing page of just the pdf. I would love for this to be able to a collection page as well.

Here is my site Read-Only: https://preview.webflow.com/preview/benefitsbylegalshield?utm_source=benefitsbylegalshield&preview=7c1801942a0827bbc7404a1f2a80b2a1

2 Likes
Pdf view in webflow
2

Hello @carsonthetford

Is this the pdf? > https://uploads-ssl.webflow.com/5bbcd57ae857d63d720ad7a4/5c11270dea9a850187108f61_LegalShield-2017-SOC3-Report.pdf

Piter :webflow_heart:

3

No I haven’t received the pdfs yet, but it will be an ongoing upload. I want to be able to create pages of any pdf that comes along the client requests. It would be in the Policies collection.

1 Like
4

Okey, The client wants pages with pdfs, not an actual pages? Here’s something I’ve found > How to embed a PDF without using JavaScript | PDFObject

Here’s another > https://pdfobject.com/

Piter :webflow_heart:

2 Likes
5

Thanks @PeterDimitrov this looks like a good option but may require some more work with the embed on their end. Any ideas for something that would only require the client to upload the pdf?

1 Like
6

@PeterDimitrov That actually is the solution! I used the static option with the embed code that page provides.<embed src="../pdf/sample-3pp.pdf#page=2" type="application/pdf" width="100%" height="100%">

Thank you! I inserted the Upload Field in place of the src.

2 Likes
Change Tab Name/URL from CMS files in new tab
7

@PeterDimitrov or anyone, I have a snag with this solution. I can’t get it to be responsive with the doc. I’ve tried wrapping it with a div, I’ve tried making it fill the whole page but I can’t get it to be responsive.

8

I had an issue, where I couldn’t get the height to work when set to 100%, so I just set it to a fixed px height. Final code below.

<object data='[PDF LINK]' 
    type='application/pdf' 
    width='100%' 
    height='670px'><p>This browser does not support inline PDFs. Please download the PDF to view it: <a href="[PDF LINK]">Download PDF</a></p></object>
1 Like
9

Hi can anyone elaborate on why this only works with PDFs hosted using Webflow?

11

I have a client that wants to update a pdf that is being displayed on their website every other month themselves, so I was running into this problem as well. I found an option, and a free one if you only need one pdf at a time. I just had to embed the code onto my page, then my client can go into their elfsight account and replace the pdf whenever they want.

Hope this helps anyone past or present!

1 Like
12

Hi folks, thank you @DoubleFeature for mentioning Elfsight widget!

We do believe this solution will come in really handy, and our Support Team is always very happy to assistance if any help needed :slight_smile:

Have a great user experience, and never hesitate to contact us should any questions arise!

Regards,
Elfsight Team

Explore all Elfsight widgets - Widget Catalog
Follow us - Facebook | Instagram

13

I have a similar question. I have embedded my PDF in my page, but I’d love to be able to scroll the PDF horizontally instead of vertically. I’ve tried many times with chat gpt but it’s not working. It was suggesting to have "style=“overflow-x: scroll; overflow-y: hidden” but it’s not working.

Would love your help!

14

Does anybody have any solutions for PDF embed which support IOS/Mac Safari browser?