Problems Embedding PDF Files in Web Pages

There are numerous threads on the internet about problems embedding PDF files in web pages. Many of them are because they are embedded from Google Docs. Google Docs seems to arbitrarily compress photos inside the document with absolutely horrifying results. If that’s the case with your embedded PDF, the fix is pretty easy. Following is a screenshot of a post with a PDF embedded from Google Docs. You will see the difference at the end of this article, with the “corrected” method of embedding a PDF.

A comparison of the two methods of embedding can be seen in these sample pages:

PDF Embedded using Google Docs

PDF Embedded Natively

It appears that the document is currently being embedded from Google docs – and Google docs has a problem in that it insists on compressing the images in PDF documents when embedded. They have not even acknowledged the problem, but there is a consensus in the technical community that it cannot be fixed in Google docs. But there is a better way to serve up the PDF in your WordPress blog.

There are two steps – the first is to add the PDF file to the media files in WordPress. To do this, click on media and then upload media.

Then browse to the file select it, and upload.

When you are done with uploading to your WordPress site, click on your library, where you will see the PDF you just uploaded. Click edit next the PDF. With the details open, you will see in the upper right corner of the screen “File URL”. Highlight and copy the entire URL from that field.

Then go to your post or page, switch to text view to insert the code for the iFrame with the embedded PDF. Insert the copied link in the following context:

<iframe src=”copied link” width=”640″ hieght=”480″</iframe>

Where copied link is obviously the link you copied from the details page of your PDF file.

For example, when I just did it on my blog, I inserted:
<iframe src=”http://brainchamber.com/wordpress/wp-content/uploads/2013/07/NL_July_Aug_13_HIGH-QUALITY_300dpiperLB.pdf” width=”640″ height=”480″</iframe>

Now when I view the page, I can see the PDF embedded in an iFrame exactly as the Google Docs embed appeared except without being exceedingly ugly. Instead of having Google Docs control the PDF viewer, the Adobe PDF viewer is controlling it and it appears correctly.

Those kids look WAY more normal to me. Nobody knows why Google screws with PDFs like this, and it’s not because we haven’t asked. It must be part of the Google conspiracy to ruin everything. Fortunately, we have a way out… for now.

  • andre_lefebvre

    Thank you! However there are some typos in your code, which may lead to errors, and as well, the closing of the tag wasn’t completed.

    <iframe src=”copied link” width=”640″ hieght=”480″

    should read:

    Thanks again, I’ve been looking for a way to get rid of Google Drive image tempering…

    Regards,

    Andre

    • andre_lefebvre

      QUESTION: do you know hoe to enable “word wrap” so that when we zoom the document (sometimes we need the font to be bigger), it won’t get out of frame, but will always remain within frame?

      thanks!

  • andre_lefebvre

    Thank you! However there are some typos in your code, which may lead to errors, and as well, the closing of the tag wasn’t completed.

    <iframe src=”copied link” width=”640″ hieght=”480″

    should read:

    Thanks again, I’ve been looking for a way to get rid of Google Drive image tempering…

    Regards,

    Andre

    • andre_lefebvre

      QUESTION: do you know hoe to enable “word wrap” so that when we zoom the document (sometimes we need the font to be bigger), it won’t get out of frame, but will always remain within frame?

      thanks!

  • No, not with the method I describe here. The iFrame method allows the client’s browser to handle the PDF rendering. This is a way to work around having the Google PDF viewer render it with compressed images.

  • Justin Staley

    Just to be clear, should the Google Docs plugin be installed with this method, or no?

    I followed your instructions, and the iFrame breaks my page:
    http://www.thesigmagroup.com/WordpressSite/services/pdf-test/

    • No, not with the method I describe here. The iFrame method allows the client’s browser to handle the PDF rendering. This is a way to work around having the Google PDF viewer render it with compressed images.

  • Great and clear instruction. I knew about this solution before i saw your post. One issue with directly embedding the pdf in your webpage without using custom PDF rendering scripts like GoogleDocs or PDF.js is its dependent on clients browsers.

    Web browsers will force a download if they don’t have adobe extension or plugin installed.

    Which was the reason I prefer googledocs since its not client browser dependent. But hey…i can’t wait for the google team anymore…whats taking them so long!! But google docs is free right? So what do you expect… 🙂

    • You are right! You get what you pay for! Actually, I love free things. But I was also brought up not to complain about free things. With the internet came a generation with a feeling of entitlement. Thousands of people just waiting for Google instead of innovating on their own. It is sad in many ways.

    • Also, consider that some people (like me) have their PDF viewer plugin disabled in their browser intentionally. I hate having PDFs opened in my browser because it is slow and clunky. I prefer spending the 2-3 seconds downloading and having it open locally. This allows users who have chosen to view things this way, view it the way they want rather than forcing them to view it in their browser. Generally, a PDF viewer is enabled in a browser by default and only those who have disabled it will not see it in their browser – and those people will be expecting that.

  • Lux

    I’m having trouble with this, I followed the exact directions on my wordpress blog. Then it looks like it halfway worked because there is a small frame on the page. But inside the frame isn’t my pdf I uploaded to the media library. Its just my website again, saying:
    “Not found. Apologies, but we were unable to find what you were looking for. Perhaps searching will help.”

    I’m already using something that is possibly using iframe on every page, a slide out widget that has twitter and FB links. So I think thats the problem?

    • Yes, I do think that is the problem you have. If either widget has an option to make it compatible with other similar widgets try enabling that.

  • Lux

    I’m having trouble with this, I followed the exact directions on my wordpress blog. Then it looks like it halfway worked because there is a small frame on the page. But inside the frame isn’t my pdf I uploaded to the media library. Its just my website again, saying:
    “Not found. Apologies, but we were unable to find what you were looking for. Perhaps searching will help.”

    I’m already using something that is possibly using iframe on every page, a slide out widget that has twitter and FB links. So I think thats the problem?

    • Yes, I do think that is the problem you have. If either widget has an option to make it compatible with other similar widgets try enabling that.

  • I am very impressed collectively together with your writing skills as neatly as with all
    the format for the weblog.I simply would like to give you a huge thumbs up for your excellent info you have right here on this post

    • Thank you. I love getting huge thumbs up. The more huge thumbs, the better.

  • Andy Harris

    Thanks for the post Michael. I’ve been having same problems uploading pdfs on my google site http://www.greenfieldschool.net. However I followed all your instructions above but when I tried to insert as a link on google site it just gives me a message to insert a valid url or email address. Any ideas would be hugely appreciated

    • Andy, if you are doing this with sites.google.com, then you should be able to add it directly to the page by using edit page and then inserting the PDF. If you want to serve the PDF directly from its current location, then you will have to have the link to the PDF. My example above uses WordPress, but the same should apply to a Google page. Use the format <iframe src=”copied link” width=”640″ hieght=”480″, where the copied link is the link that you would use to get to the PDF directly. In my example, you will see that if you navigate to http://brainchamber.com/wordpress/wp-content/uploads/2013/07/NL_July_Aug_13_HIGH-QUALITY_300dpiperLB.pdf, that is the actual document. All the iframe part does is put it in it’s own frame on the page. So to break that down there are two steps:

      1. Upload the PDF to a place where it can be accessed publicly, preferably someplace on your web site.
      2. Include that PDF on the web page by putting it in an iframe using the code above.

      That should be all you have to do.

      • Andy Harris

        That is fantastic – works perfectly. I put it into my wordpress blog but then added the iframe on my google site which of course I didn’t need to do. And thanks for your rapid response too! Really appreciated!

        • Andy, thank you for opening the discussion. I really appreciate it. You’re welcome to come back any time to get a conversation going. Thanks!
          Mike

  • Andy Harris

    Thanks for the post Michael. I’ve been having same problems uploading pdfs on my google site http://www.greenfieldschool.net. However I followed all your instructions above but when I tried to insert as a link on google site it just gives me a message to insert a valid url or email address. Any ideas would be hugely appreciated

    • Andy, if you are doing this with sites.google.com, then you should be able to add it directly to the page by using edit page and then inserting the PDF. If you want to serve the PDF directly from its current location, then you will haev to have the link to the PDF. My example above uses WordPress, but the same should apply to a Google page. Use the format <iframe src=”copied link” width=”640″ hieght=”480″, where the copied link is the link that you would use to get to the PDF directly. In my example, you will see that if you navigate to http://brainchamber.com/wordpress/wp-content/uploads/2013/07/NL_July_Aug_13_HIGH-QUALITY_300dpiperLB.pdf, that is the actual document. All the iframe part does is put it in it’s own frame on the page. So to break that down there are two steps:

      1. Upload the PDF to a place where it can be accessed publicly, preferably someplace on your web site.
      2. Include that PDF on the web page by putting it in an iframe using the code above.

      That should be all you have to do.

      Mike

      • Andy Harris

        That is fantastic – works perfectly. I put it into my wordpress blog but then added the iframe on my google site which of course I didn’t need to do. And thanks for your rapid response too! Really appreciated!

        • Andy, thank you for opening the discussion. I really appreciate it. You’re welcome to come back any time to get a conversation going. Thanks!
          Mike

  • Yejide

    Thank you so much, you were right there are loads of articles about adding Google Docs Embedder and it is not the best solution as all the editable fields on the PDF form were removed but with your solution they still remain. You’re a Star 🙂

    • Michael Hannigan

      Thank you very much! There are a lot of people that just refuse to believe it. Things like this with Google can drag out for years – and I’ve never understood how someone could wait years for a resolution to something like this!

      Thank you for coming to the blog and contributing. I really appreciate it and welcome you back any time!

      Mike