What is the MOST reliable way to display PDFs on page?

Need help Plugins
1

I have been trying all popular (paid and unpaid) plugins but honestly can’t find something that consistently works. Just pdfs, no other filer formats? Thank you :raised_hands:

1 Like
2

Okay just to preface, I have never tested this and maybe it’s too good to be true…

Use an HTML element with:

<embed
	src= "https:Document’s file URL"
	type="application/pdf"
	width="100%"
	height="100%"
/>

Then the browser should handle displaying the PDF.

Let me know…

5 Likes
3

Nice! Will have a go - thanks

4

Honestly, this is BY A MILE better than ANY PDF PLUGIN I ever used and I have used the all. The more I am on bubble the less I want anything to do with plugins even from reputable sources. THANKS SO MUCH :raised_hands::raised_hands:

2 Likes
5

Perfect for the desktop! Could you check why on the mobile it displays a button to “open a pdf” istead of displaying the pdf as on the desktop?

Thanks!

6

There are some solutions here:

7

Have tried Pdf Viewer with some issues if there are multiple plugin elements on the same page (one page app), with Adobe some issues if there if you go between different pdf’s on the same page as well. Have found this html snippet cleanest and it works between different pdfs on the same page.

Have tried now:

<object data="mypdf.pdf" type="application/pdf" frameborder="0" width="100%" height="600px" style="padding: 20px;">
    <embed src="https://drive.google.com/file/d/1CRFdbp6uBDE-YKJFaqRm4uy9Z4wgMS7H/preview?usp=sharing" width="100%" height="600px"/> 
</object>

It says how mobile browser doesn’t support this “plugin”, whereas on the desktop still fine, similar to the original html snippet you shared previously in the thread here. Could you direct here further perhaps with the code background?

Thanks! Looking forward :upside_down_face:

8

Try using the src=“https://docs.google.com/viewer?url=http:Your PDF URL”

Also you could have two distinct HTML tags. Have ‘current page width < 480:format as text’

If yes,

<embed src=src=“https://docs.google.com/viewer?url=http:Your PDF URL” width="100%" height="600px"/>

If no,

<embed
	src= "https:Document’s file URL"
	type="application/pdf"
	width="100%"
	height="100%"
/>
1 Like
9

Have tried with the condition on the width, if yes and if no and no changes, the same button is shown on the mobile to open the pdf as without the condition, whereas on the desktop works as a charm -.-

Does this way works for you? Maybe browser difference?

10

Works great!
Anyone know how to pass a filename dynamically?

11

Is there any way in this code to suppress the toolbar that allows downloading? I just want them to see the pdf not, download it. Thanks.

1 Like