Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Embedded File Viewer: Google Drive, OneDrive

Office Web Apps Viewer

('.ppt' '.pptx' '.doc', '.docx', '.xls', '.xlsx')

http://view.officeapps.live.com/op/view.aspx?src=[OFFICE_FILE_URL]

<iframe src='https://view.officeapps.live.com/op/embed.aspx?src=[OFFICE_FILE_URL]' width='px' height='px' frameborder='0'>
</iframe>

OneDrive Embed Links

Powerpoint

<iframe src="https://onedrive.live.com/embed?cid=CA582F2BC3AD1590&resid=CA582F2BC3AD1590%2133463&authkey=AFh1O3tkDLAQzzw&em=2" width="402" height="327" frameborder="0" scrolling="no"></iframe>

Excel

<iframe src="https://onedrive.live.com/embed?cid=CA582F2BC3AD1590&resid=CA582F2BC3AD1590%2136277&authkey=AHJ96YRJIbbJcec&em=2" frameborder="0" scrolling="no" width="800" height="346"></iframe>

Google Docs Viewer

Only files under 25 MB can be previewed with the Google Drive viewer.

Google Drive viewer helps you preview over 16 different file types, listed below:

  • Image files (.JPEG, .PNG, .GIF, .TIFF, .BMP)
  • Video files (WebM, .MPEG4, .3GPP, .MOV, .AVI, .MPEGPS, .WMV, .FLV)
  • Text files (.TXT)
  • Markup/Code (.CSS, .HTML, .PHP, .C, .CPP, .H, .HPP, .JS)
  • Microsoft Word (.DOC and .DOCX)
  • Microsoft Excel (.XLS and .XLSX)
  • Microsoft PowerPoint (.PPT and .PPTX)
  • Adobe Portable Document Format (.PDF)
  • Apple Pages (.PAGES)
  • Adobe Illustrator (.AI)
  • Adobe Photoshop (.PSD)
  • Tagged Image File Format (.TIFF)
  • Autodesk AutoCad (.DXF)
  • Scalable Vector Graphics (.SVG)
  • PostScript (.EPS, .PS)
  • TrueType (.TTF)
  • XML Paper Specification (.XPS)
  • Archive file types (.ZIP and .RAR)

Google Docs Viewer (Apps)

https://docs.google.com/a/[DOMINIO]/viewer?url=[FILE_URL]

Google Docs Viewer

https://docs.google.com/a/[DOMINIO]/viewer?url=[FILE_URL]

Google Drive

Sheets

<iframe src="https://docs.google.com/spreadsheets/d/13R8O15c_sZKZT2QRHom1z2SDA3E1O5chUvROnqHCkwE/pubhtml?widget=true&amp;headers=true" style="width:100%;height:100%;"></iframe>

Embedded File Viewer

Google Docs offers an undocumented feature that lets you embed PDF files and PowerPoint presentations in a web page. The files don't have to be uploaded to Google Docs, but they need to be available online.

Google Drive Viewer: Explicit PDF files

<iframe src="https://docs.google.com/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>
<iframe src="https://drive.google.com/viewerng/viewer?url=http://docs.google.com/fileview?id=0B5ImRpiNhCfGZDVhMGEyYmUtZTdmMy00YWEyLWEyMTQtN2E2YzM3MDg3MTZh&hl=en&pid=explorer&efh=false&a=v&chrome=false&embedded=true" frameborder="0"></iframe>

Google Drive Viewer: Non-PDF files (fileviewer URL)

To view Google Drive docs from fileviewer links, use the file ID as the srcid attribute in the iframe.

The file ID for your PDF (one that is already in Google Drive) can be found in the PDFs web address. When you open a PDF, it’s the garbage-looking piece of the URL (it will be between forward-slashes, “/”).

The file ID is highlighted in yellow.

In this case it’s the 0B3xoQi_oa7_hU2J5S1RQbFdqS3c

Source: http://docs.google.com/fileview?id=0B5ImRpiNhCfGZDVhMGEyYmUtZTdmMy00YWEyLWEyMTQtN2E2YzM3MDg3MTZh&hl=en&pid=explorer&efh=false&a=v&chrome=false&embedded=true

id: 0B5ImRpiNhCfGZDVhMGEyYmUtZTdmMy00YWEyLWEyMTQtN2E2YzM3MDg3MTZh

Or

Source: https://drive.google.com/file/d/0B5ImRpiNhCfGZDVhMGEyYmUtZTdmMy00YWEyLWEyMTQtN2E2YzM3MDg3MTZh/view?ddrp=1&hl=en#

id: 0B5ImRpiNhCfGZDVhMGEyYmUtZTdmMy00YWEyLWEyMTQtN2E2YzM3MDg3MTZh

Result:

<iframe src="https://docs.google.com/viewer?srcid=[put your file id here]&pid=explorer&efh=false&a=v&chrome=false&embedded=true" width="580px" height="480px"></iframe>

Resources

Info: http://www.labnol.org/internet/google-docs-viewer-alternative/

@RebeccaWhit3

This comment has been minimized.

Copy link

RebeccaWhit3 commented Jun 11, 2017

Many thanks for the awesome summary!

FYI:
The syntax in the Google Drive Viewer: Explicit PDF files section works with non-pdf files.

Example:
https://docs.google.com/viewer?url=https://gist.github.com/tzmartin/1cf85dc3d975f94cfddc04bc0dd399be&embedded=true

@mtx-z

This comment has been minimized.

Copy link

mtx-z commented Jun 16, 2017

Google Doc Viewer not working with image file, someone succeeded this ?

@code-knight

This comment has been minimized.

Copy link

code-knight commented Jun 19, 2017

Does google doc viewer works for csv files too? I am not able to view csv in google docs viewer with excel sheets.

@Sathiesh

This comment has been minimized.

Copy link

Sathiesh commented Aug 1, 2017

I can't able to preview the docx file which I download from my google drive, is there any possibility to view this or may I know the reason why it caused? Thanks!

@disturbed-pixel

This comment has been minimized.

Copy link

disturbed-pixel commented Aug 17, 2017

For PSD files i always get "no preview available", its a couple of simple layers to test and only 2.5mb

@prud

This comment has been minimized.

Copy link

prud commented Aug 19, 2017

@tzmartin Awesome summary on available file viewers. By any chance do you know if the linked file is processed by MS or Google in their respective solutions? #AskingForAnEnterpriseFriend

@velvetkeyboard

This comment has been minimized.

Copy link

velvetkeyboard commented Nov 9, 2017

Anyone knows if it's possible to control the size of the buttons for the PDF viewer? (at the bottom)

@amankapoor

This comment has been minimized.

Copy link

amankapoor commented Jan 2, 2018

What is DOMINIO? I don't seem to get what this term means.

@StarWar

This comment has been minimized.

Copy link

StarWar commented Jan 3, 2018

Is there any bandwidth limit, if I use these methods to embed pdf documents. Will Google block my domain or limit access to it after it crosses the limit?
As of now, I think there are bandwidth limits on content which is stored in google drive:-

Limit Per hour Per day
Download via web client 750 MB 1250 MB
Upload via web client 300 MB 500 MB
POP and IMAP bandwidth limits

Limit Per day
Download via IMAP 2500 MB
Download via POP 1250 MB
Upload via IMAP 500 MB
See Get started with IMAP and POP3 for instructions on using those methods.

But will it be applicable if I use it to show documents stored in my cloud storage as above gist suggest?

@mynameisgenesis

This comment has been minimized.

Copy link

mynameisgenesis commented Jan 3, 2018

Yay! Thank you!

@thedotedge

This comment has been minimized.

Copy link

thedotedge commented Jan 8, 2018

It lists Adobe Photoshop (.PSD) and Adobe Illustrator (.AI) as supported, but is it really so? Couldn't get it to work :(

@helloromero

This comment has been minimized.

Copy link

helloromero commented Feb 14, 2018

Is the Google Drive Viewer Official? I need to know if it cam be used for commercial use.

Can someone send me confirmation from Google if it is an official thing.

@AlvaroFalcon

This comment has been minimized.

Copy link

AlvaroFalcon commented Feb 21, 2018

IS there a way to hide the viewer controls? Thanks.

@RafaHC

This comment has been minimized.

Copy link

RafaHC commented Apr 24, 2018

Do I need license for show files .xls and .xlsx?

@QORTEZ

This comment has been minimized.

Copy link

QORTEZ commented May 10, 2018

how do you pass zoom parameters to Embedded File Viewer or make it to fit width

@Sidd27

This comment has been minimized.

Copy link

Sidd27 commented May 24, 2018

Image Files Like PNG and JEPG are not working

@rajagopalx

This comment has been minimized.

Copy link

rajagopalx commented Jun 28, 2018

Google Docs Viewer with Amazon S3 like files: http://www.bitesite.ca/blog_posts/17

@spencerwasden

This comment has been minimized.

Copy link

spencerwasden commented Jul 3, 2018

As @amankapoor asked, what is [DOMINIO] in the Google Docs Viewer url?

@chamini2

This comment has been minimized.

Copy link

chamini2 commented Jul 9, 2018

@amankapoor and @spencerwasden, it probably refers to domain, since dominio is domain in spanish.

@saifkhichi96

This comment has been minimized.

Copy link

saifkhichi96 commented Sep 25, 2018

Is there a way to change the background color? It gives a grey color by default.

@arijitdas7

This comment has been minimized.

Copy link

arijitdas7 commented Sep 28, 2018

Is any one succeeding with image file?

@kbiedrzycki

This comment has been minimized.

Copy link

kbiedrzycki commented Nov 15, 2018

@arjitdas7 you can use createObjectURL

@sriharsha1235

This comment has been minimized.

Copy link

sriharsha1235 commented Dec 24, 2018

Google Docs Viewer with Amazon S3 like files: http://www.bitesite.ca/blog_posts/17

Link has updated https://www.bitesite.ca/blog/17

@bbl-galvarez

This comment has been minimized.

Copy link

bbl-galvarez commented Apr 6, 2019

It only works when my PDF file has only 1 page. If the PDF file has multiple pages, it does NOT load. Any ideas??

@NaveenDA

This comment has been minimized.

Copy link

NaveenDA commented May 14, 2019

Is there is any possibility for Intranet application support?

@Jackiesings

This comment has been minimized.

Copy link

Jackiesings commented Jun 8, 2019

I am not a programmer. Can anyone tell me please where to type in the link to find the embedded file.Thanks, Jackie

@mariojimmy

This comment has been minimized.

Copy link

mariojimmy commented Aug 5, 2019

For the mobile side not all the requests are served when loading the viewer in a webview for both platforms Android & iOS
how i can indicate that is currently displaying a blank page to reload the url?

@koushikmln

This comment has been minimized.

Copy link

koushikmln commented Sep 16, 2019

https://www.bitesite.ca/blog/17

Thanks for the reference.

@1653099

This comment has been minimized.

Copy link

1653099 commented Oct 10, 2019

Can anyone tell me how to custom preload when preview file? Thanks

@NaveenDA

This comment has been minimized.

Copy link

NaveenDA commented Oct 10, 2019

@1653099
Just add a background image as loader for the iframe. refer: https://stackoverflow.com/a/6772514/6335029

@landsman

This comment has been minimized.

Copy link

landsman commented Nov 19, 2019

I am looking for tool which can view markdown, is there solution?

@NaveenDA

This comment has been minimized.

Copy link

NaveenDA commented Nov 19, 2019

@ronaldohoch

This comment has been minimized.

Copy link

ronaldohoch commented Nov 21, 2019

Hello!
Is there a way to allow download of the file from file viewer ui?

@rodrigo-brilhante

This comment has been minimized.

Copy link

rodrigo-brilhante commented Feb 4, 2020

Hello
I have a problem with the internal hyperlink, it is not working and the external one works normally.
has anyone had this problem?

@derwaldgeist

This comment has been minimized.

Copy link

derwaldgeist commented Mar 3, 2020

Is there a documentation of the URI parameters the Google viewer supports? I am trying to get rid of the "fullscreen" button.

@Karan-Ghatt

This comment has been minimized.

Copy link

Karan-Ghatt commented May 6, 2020

Hi,

I've been trying to embedded this file, but every time I try and access the page I just get a whole load of code thrown at me.
This is the html:

<title>Karanvir's Resume</title> <iframe src="https://docs.google.com/gview?url=https://github.com/Karan Ghatt/Resume/blob/master/CV%20Karanvir%20Singh%20Ghattoraya%20%5BJan%202020%5D.pdf&embedded=true" style="width:100%; height:100%;" frameborder="0"> </iframe>

I can't seem to figure out whats going on, any advice would be greatly appriciatred!

@Karan-Ghatt

This comment has been minimized.

Copy link

Karan-Ghatt commented May 6, 2020

@edvilme

This comment has been minimized.

Copy link

edvilme commented May 7, 2020

Hi,

I've been trying to embedded this file, but every time I try and access the page I just get a whole load of code thrown at me.
This is the html:

<title>Karanvir's Resume</title> <iframe src="https://docs.google.com/gview?url=https://github.com/Karan Ghatt/Resume/blob/master/CV%20Karanvir%20Singh%20Ghattoraya%20%5BJan%202020%5D.pdf&embedded=true" style="width:100%; height:100%;" frameborder="0"> </iframe> I can't seem to figure out whats going on, any advice would be greatly appriciatred!

You need to encode the url to your resume. In js

let encodedEmbedURL = encodeURIComponent("https://github.com/Karan-Ghatt/Karanvir-Ghattoraya/raw/master/CV-%20Karanvir%20Singh%20Ghattoraya%20%5BJan%202020%5D.pdf")
let embedURL = `https://docs.google.com/gview?url=${encodedEmbedURL}&embed=true`

Add embedURL as the src parameter in your iframe

@gabolucuy

This comment has been minimized.

Copy link

gabolucuy commented Jul 9, 2020

Can anyone please confirm if Google viewer uploads the file to Google's servers?

@perelin

This comment has been minimized.

Copy link

perelin commented Jul 19, 2020

Can anyone please confirm if Google viewer uploads the file to Google's servers?

Yep. Checkout eg https://docs.google.com/viewer?url=http://africau.edu/images/default/sample.pdf&embedded=true in your browsers Inspect Network tab. Not a single request to africau.edu. Everything is loaded from Google servers. It´s a trap :)

@NaveenDA

This comment has been minimized.

Copy link

NaveenDA commented Jul 20, 2020

@perelin, I don't think so. Word processor requires lot of calculation, so they must call on the server-side and it will not show the browser network log.
Yes, those files are upload in Google's server for processing. Google only knows whether it is temporary or permanent

@perelin

This comment has been minimized.

Copy link

perelin commented Jul 20, 2020

@NaveenDA: Sure.

To be honest, I don´t think there is a "temporary" when it comes to Google. The just ingest everything we give them and use it for training models, etc. The thing is: there is no T&C for the Google Docs Viewer. You can use it without signing any form of agreement with Google. Means they can do pretty much whatever they want with the documents. At least in the boundaries of the regulation and law they are working under (US law as far as I know). But that doesn´t mean the Docs Viewer can´t be used. I would just mitigate liabilities when it comes to using this for 3rd party documents, eg user content. You can always ask the user before displaying his documents in the Google Viewer. At least here in the EU under the GDPR regulation that would be the safe way to go.

@rrrepos

This comment has been minimized.

Copy link

rrrepos commented Jul 22, 2020

Hello: Is there a way to embed a file from local storage or even pass a base64 string (say convert a PDF to base64)? I tried using createObjectUrl but it does not work

@spatinolang-vtr

This comment has been minimized.

Copy link

spatinolang-vtr commented Jul 22, 2020

@rrrepos: No, I don´t think that is possible. I tried using a dataURI with an base64 encoded pdf. Didn´t work for me. The previewed file needs to be available online.

@rrrepos

This comment has been minimized.

Copy link

rrrepos commented Jul 22, 2020

Ah ok. Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.