Embed pdf in website

[bornfree]

Hi. Just wondering if anybody has experience of embedding a PDF in a webpage? Adobe has a free tool to do it, but it invloves API work which is beyond me! Or perhaps there's a developer that somebody could recommend? Many thanks

[Phoenix]

Hi. Just wondering if anybody has experience of embedding a PDF in a webpage? Adobe has a free tool to do it, but it invloves API work which is beyond me! Or perhaps there's a developer that somebody could recommend? Many thanks

Hi Bornfree

Not sure if this is what you want but,

1. Put a picture onto the webpage you want the PDF on (you could use a free web tool to de-construct the PDF document so the firest page is the image you use
2. Upload the PDF
3. Use the WYSIWYG editor to link the picture to the uploaded PDF file

Not sure if that helps

[bornfree]

Thanks very much Tim. Yes, that's certainly one way of doing it. But I'm trying to somehow embed the PDF without allowing it to be downloaded (and shared!). I've been playing around with a few of those flip book programmes which convert PDFs to HTML flip books, but haven't yet come up with a solution. I was hoping that one of these, plus embedding on a page on the site that is made private, would do the trick. I'll keep looking. Thanks again.

[Mikey]

I'm trying to somehow embed the PDF without allowing it to be downloaded (and shared!).

it's fairly straight forward to embed a PDF within a page when viewed on a desktop, but unfortunately this isn't currently supported in mobile browsers (including tablets) and as such the file would need to be downloaded to view in the devices native PDF viewer (I know you don't want the PDF to be able to be downloaded, but unfortunately there is no way to stop this anyway as even the desktops embedded view still gives you the option to download it).

OK, so for this example lets imagine you have a PDF called 'my-file' that you have uploaded it to the 'user' folder within Bluepark (just the same way as you would with an image) - now create a new block and paste in the following code:

<object data="/user/my-file.pdf" width="100%" height="500px"></object>

Same, but with a fall-back notice for mobile browsers:

<object data="/user/my-file.pdf" width="100%" height="500px"><p>Your browser doesn't support PDF files</p><p><a href="/user/my-file.pdf">Download Instead</a></p></object>

As above, but also with the option to download the file so it can at least be viewed outside of the the mobile browser:

<object data="/user/my-file.pdf" width="100%" height="500px"><p>Your browser doesn't support PDF files</p><p><a href="/user/my-file.pdf">Download Instead</a></p></object>

(Keeping the width to 100% will make it responsive to the browser window size and you can change the height value to suit accordingly.)


Hope this helps,

Mike

[bornfree]

Thanks Mike, that's very helpful. I'll have a play with this. I'm still hunting for a PDF viewer that doesn't allow downloading of the original file. I've found a few, but none does quite what I'm looking for.
Thanks again for taking the time

[bornfree]

I've drawn a blank on this. As you said Mike, there's no real way to 'hide' a pdf, even if it's embedded. So, I'm now playing with the idea of embedding a presentation on a page on my website instead. This does most of what I need, but there is a 'share' button in the bottom corner of the presentation which I'd like to avoid. See this test page:

https://www.tandtpublishing.co.uk/te...ion-embed.html

Just wondering if somebody with coding knowledge can see if there's a way to delete the 'share' function?

Here's the code for embedding the presentation onto a webpage:

<div style="position: relative; width: 100%; height: 0; padding-top: 56.2500%;
padding-bottom: 48px; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden;
border-radius: 8px; will-change: transform;">
<iframe style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;"
src="https:&#x2F;&#x2F;www.canva.com&#x2F;design&# x2F;DAEL_AwLeKQ&#x2F;view?embed">
</iframe>
</div>
<a href="https:&#x2F;&#x2F;www.canva.com&#x2F;design& #x2F;DAEL_AwLeKQ&#x2F;view?utm_content=DAEL_AwLeKQ &amp;utm_campaign=designshare&amp;utm_medium=embed s&amp;utm_source=link" target="_blank" rel="noopener">Colorful 3D Illustrated Remote Learning Events and Special Interest Presentation</a> by info0738

Thanks in advance!

[Loxta]

It's not cheap, but have you tried Publitas?

[Mikey]

Just wondering if somebody with coding knowledge can see if there's a way to delete the 'share' function?

Unfortunately all that code does is set-up the iframe window and the link to where the file is hosted. Because the file is hosted on Canva's servers, it isn't possible to edit either the HTML or CSS required to remove/hide the share button via Bluepark. The only way to do this would be through Canva directly - so you'd need either the an option somewhere in their backend console to remove the button, or the ability to download the source files so that they can be edited and then hosted locally on Bluepark, but I'm guessing Canva give neither option?

Mike

[bornfree]

It's not cheap, but have you tried Publitas?

Thanks Shaun. Yes, we already use Publitas, but unfortunately they don't have a solution that can make a pdf truly 'hidden'. We'll keep looking!

[bornfree]

Unfortunately all that code does is set-up the iframe window and the link to where the file is hosted. Because the file is hosted on Canva's servers, it isn't possible to edit either the HTML or CSS required to remove/hide the share button via Bluepark. The only way to do this would be through Canva directly - so you'd need either the an option somewhere in their backend console to remove the button, or the ability to download the source files so that they can be edited and then hosted locally on Bluepark, but I'm guessing Canva give neither option?

Mike

Thanks Mike
That's what I thought when I looked at the code (with no coding experience!). I've messaged Canva to see if they can do anything.
Thanks again

[Neil]

<iframe height="500px" src="/YourPDFPath.pdf#toolbar=0" width="100%"></iframe>

I might have got the wrong end of the stick with what you are trying to do tho.

[Mikey]

<iframe height="500px" src="/YourPDFPath.pdf#toolbar=0" width="100%"></iframe>

I might have got the wrong end of the stick with what you are trying to do tho.

Neil this does indeed hide the toolbar, but unfortunately you can still simply right click and download it. Also, trying to disable the right click context menu function with JavaScript won't work either within the PDF viewer.

Thanks Mike
That's what I thought when I looked at the code (with no coding experience!). I've messaged Canva to see if they can do anything.
Thanks again

See what Canva say, but I have thought of a bit of a 'fudge' way around it which basically consists of making a small circle to cover over the share button preventing it from both being visible and clickable as if it was never there.

So with the embed code you've been given, you need to paste in the red code below just before the code for the iframe:


.....will-change: transform;"> <div class="hide-share-button" style="position: absolute; right: 0; width: 48px; height: 48px; border-radius: 50%; background-color: #fff; z-index: 1;"></div> <iframe style="position: absolute;.....


Give it a go and let me know what you think...

Mike

[bornfree]

<iframe height="500px" src="/YourPDFPath.pdf#toolbar=0" width="100%"></iframe>

I might have got the wrong end of the stick with what you are trying to do tho.

Thanks a lot Neil. Yes, this works fine, but my main aim is to get a solution which doesn't allow the pdf to be copied/shared.
Thanks for taking the time.

[bornfree]

Neil this does indeed hide the toolbar, but unfortunately you can still simply right click and download it. Also, trying to disable the right click context menu function with JavaScript won't work either within the PDF viewer.



See what Canva say, but I have thought of a bit of a 'fudge' way around it which basically consists of making a small circle to cover over the share button preventing it from both being visible and clickable as if it was never there.

So with the embed code you've been given, you need to paste in the red code below just before the code for the iframe:


.....will-change: transform;"> <div class="hide-share-button" style="position: absolute; right: 0; width: 48px; height: 48px; border-radius: 50%; background-color: #fff; z-index: 1;"></div> <iframe style="position: absolute;.....


Give it a go and let me know what you think...

Mike

Thanks a lot Mike. This works just great and is a clever solution to the issue.
Much appreciated.