Results 1 to 14 of 14

Thread: Embed pdf in website

  1. #1
    Join Date
    Apr 2012
    Posts
    189

    Default Embed pdf in website

    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

  2. #2
    Join Date
    Dec 2011
    Location
    Birmingham, United Kingdom
    Posts
    169

    Default

    Quote Originally Posted by bornfree View Post
    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

  3. #3
    Join Date
    Apr 2012
    Posts
    189

    Default

    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.

  4. #4
    Join Date
    Aug 2016
    Posts
    191

    Default

    Quote Originally Posted by bornfree View Post
    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:

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

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

    HTML Code:
    <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:

    HTML Code:
    <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

  5. #5
    Join Date
    Apr 2012
    Posts
    189

    Default

    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

  6. #6
    Join Date
    Apr 2012
    Posts
    189

    Default

    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!

  7. #7
    Join Date
    Apr 2012
    Posts
    418

    Default

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

    Loxta Hardware
    www.loxta.co.uk

  8. #8
    Join Date
    Aug 2016
    Posts
    191

    Default

    Quote Originally Posted by bornfree View Post
    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

  9. #9
    Join Date
    Apr 2012
    Posts
    189

    Default

    Quote Originally Posted by Loxta View Post
    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!

  10. #10
    Join Date
    Apr 2012
    Posts
    189

    Default

    Quote Originally Posted by Mikey View Post
    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

  11. #11
    Join Date
    Nov 2008
    Posts
    2,188

    Default

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

    Neil.

  12. #12
    Join Date
    Aug 2016
    Posts
    191

    Default

    Quote Originally Posted by Neil View Post
    <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.

    Quote Originally Posted by bornfree View Post
    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

  13. #13
    Join Date
    Apr 2012
    Posts
    189

    Default

    Quote Originally Posted by Neil View Post
    <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.

  14. #14
    Join Date
    Apr 2012
    Posts
    189

    Default

    Quote Originally Posted by Mikey View Post
    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.

Similar Threads

  1. Embed Google Review Score
    By tomtomg in forum Bluepark Technical Discussion
    Replies: 8
    Last Post: 03-10-2020, 20:42
  2. Embed Video
    By tomtomg in forum Bluepark Technical Discussion
    Replies: 1
    Last Post: 26-09-2020, 23:02
  3. Can I embed a twitter account?
    By LloydClark in forum Online Marketing and Promotion
    Replies: 17
    Last Post: 15-05-2013, 20:55
  4. Embed Font Face
    By McGlade in forum Bluepark Technical Discussion
    Replies: 1
    Last Post: 22-10-2010, 11:46
  5. How do I embed a Youtube video?
    By bubble in forum Bluepark Technical Discussion
    Replies: 2
    Last Post: 27-05-2009, 12:16

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
About us

Bluepark's ecommerce software is developed, hosted and supported exclusively by ourselves, here in the UK, and has been so since the company was initially formed in 2004. Your brand new online shop will be hosted securely on our fast and reliable server network, using a domain name of your choice, providing the ability to build and maintain your ecommerce website, and manage your orders, from any location via your own secure online Administration Console.

A Bluepark ecommerce site is the perfect tool for selling online, whether you're selling physical products, digital downloads or services. You'll be in good company with over 1,000 UK customers who also form a friendly and helpful online community, further strengthening our highly acclaimed support network.

Find us on...