Embed Google Docs PDF viewer in IFRAME
Question:
When I upload PDF to Google Docs (using Python’s gdata library), I get link to the document:
>>> e.GetAlternateLink().href
Out[14]: 'http://docs.google.com/a/my.dom.ain/fileview id=<veery-long-doc-id>&hl=en'
Unfortunately using that link in IFRAME is not working for me because PDF viewer is redirecting to itself, breaking out of IFRAME.
Looking for the solution, I’ve found this: http://googlesystem.blogspot.com/2009/09/embeddable-google-document-viewer.html – which looks very nice, but I can’t find a way to use it with document uploaded to Google Docs. Does somebody know how to do it/if it’s at all possible?
Answers:
Just for the record – I haven’t found any way to force “internal” google google pdf viewer to not go out of the iframe. And as I mentioned in the question, I found this nice standalone viewer: http://googlesystem.blogspot.com/2009/09/embeddable-google-document-viewer.html, that can be used like this:
<iframe src="http://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>
— but in order to use it you have to publish your PDF to the outside world. This wouldn’t be a bad solution, because published document has unique id that is probably harder to guess than a password to google docs account. Unfortunately, even with hottest Google Docs API version 3 API, there seems to be no way of publishing PDF programatically..
In the end, I went for a mix of: standalone PDF viewer from google and some other web service that allows to programatically upload and publish PDF. A bit half-baked solution, but it works well so far.
To embed pdf files present in your google docs into your website use the below code:
<iframe src="http://docs.google.com/gview?a=v&pid=explorer&chrome=false&api=true&embedded=true&srcid=<id of your pdf>&hl=en&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>
The Google Docs embedding in iframes via the viewer is problematic in IE8 if not already cached, and is is just not equal to the much better Scribd’s facility that allows you to simply make a simple html page with the document embeded via their supplied object code for the document. I then use it as the source file for my iframe. It shows the print (and also a full screen button), right in the embedded frame page. Much more friendly and reliable for the page’s visitors.
Try this!
Same as other answers above…
<iframe src="https://docs.google.com/gview?url={magical url that works}"></iframe>
except the magical url that works is https://drive.google.com/uc?id=<docId>&embedded=true.
Google Drive/Docs provides a bunch of different urls:
https://drive.google.com/open?id=<docId> Share link.https://docs.google.com/document/<docId>/edit Open in Google Drive.https://docs.google.com/document/d/<docId>/view Same as ‘edit’ above. I think.https://docs.google.com/document/d/<docId>/pub?embedded=true For embedding in iframe if you File -> Publish to the web...https://drive.google.com/uc?export=download&id=<docId> Direct download link.
I stumbed across this solution after a bunch of trial and error with different links. Hope this helps!
The following worked for me:
<iframe src="https://drive.google.com/viewerng/viewer?url=url_of_pdf?pid=explorer&efh=false&a=v&chrome=false&embedded=true" embedded=true></iframe>
Spent an hour on this:
NOTE: encodeURIComponent is important
<iframe src={`https://docs.google.com/gview?url=${encodeURIComponent('http://infolab.stanford.edu/pub/papers/google.pdf')}&embedded=true`}></iframe>
When I upload PDF to Google Docs (using Python’s gdata library), I get link to the document:
>>> e.GetAlternateLink().href
Out[14]: 'http://docs.google.com/a/my.dom.ain/fileview id=<veery-long-doc-id>&hl=en'
Unfortunately using that link in IFRAME is not working for me because PDF viewer is redirecting to itself, breaking out of IFRAME.
Looking for the solution, I’ve found this: http://googlesystem.blogspot.com/2009/09/embeddable-google-document-viewer.html – which looks very nice, but I can’t find a way to use it with document uploaded to Google Docs. Does somebody know how to do it/if it’s at all possible?
Just for the record – I haven’t found any way to force “internal” google google pdf viewer to not go out of the iframe. And as I mentioned in the question, I found this nice standalone viewer: http://googlesystem.blogspot.com/2009/09/embeddable-google-document-viewer.html, that can be used like this:
<iframe src="http://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>
— but in order to use it you have to publish your PDF to the outside world. This wouldn’t be a bad solution, because published document has unique id that is probably harder to guess than a password to google docs account. Unfortunately, even with hottest Google Docs API version 3 API, there seems to be no way of publishing PDF programatically..
In the end, I went for a mix of: standalone PDF viewer from google and some other web service that allows to programatically upload and publish PDF. A bit half-baked solution, but it works well so far.
To embed pdf files present in your google docs into your website use the below code:
<iframe src="http://docs.google.com/gview?a=v&pid=explorer&chrome=false&api=true&embedded=true&srcid=<id of your pdf>&hl=en&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>
The Google Docs embedding in iframes via the viewer is problematic in IE8 if not already cached, and is is just not equal to the much better Scribd’s facility that allows you to simply make a simple html page with the document embeded via their supplied object code for the document. I then use it as the source file for my iframe. It shows the print (and also a full screen button), right in the embedded frame page. Much more friendly and reliable for the page’s visitors.
Try this!
Same as other answers above…
<iframe src="https://docs.google.com/gview?url={magical url that works}"></iframe>
except the magical url that works is https://drive.google.com/uc?id=<docId>&embedded=true.
Google Drive/Docs provides a bunch of different urls:
https://drive.google.com/open?id=<docId>Share link.https://docs.google.com/document/<docId>/editOpen in Google Drive.https://docs.google.com/document/d/<docId>/viewSame as ‘edit’ above. I think.https://docs.google.com/document/d/<docId>/pub?embedded=trueFor embedding in iframe if youFile -> Publish to the web...https://drive.google.com/uc?export=download&id=<docId>Direct download link.
I stumbed across this solution after a bunch of trial and error with different links. Hope this helps!
The following worked for me:
<iframe src="https://drive.google.com/viewerng/viewer?url=url_of_pdf?pid=explorer&efh=false&a=v&chrome=false&embedded=true" embedded=true></iframe>
Spent an hour on this:
NOTE: encodeURIComponent is important
<iframe src={`https://docs.google.com/gview?url=${encodeURIComponent('http://infolab.stanford.edu/pub/papers/google.pdf')}&embedded=true`}></iframe>