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/

@zqdevelopment
Copy link

zqdevelopment commented May 26, 2021

I use this API(Google Viewer) to preview, but it is not working with extension:
.WebM (no)
.MPEG4 (no)
.3GPP (no)
.MOV (no)
.AVI (no)
.WMV (no)
.FLV (no)
.PHP (no)
.TTF (no)
.XPS (no)
.ZIP (no)
.RAR (no)
.PNG (no)
.GIF (no)
.PSD (no)
I will be very happy if you give me an idea.

@dPowNextdoor
Copy link

dPowNextdoor commented Jul 16, 2021

Do you know of any way to support Base64-encoded data URLs for a file/content that isn't uploaded to a public URL?

e.g.

const arbitraryHtml = '<html><body><h2>hello world</h2></body></html>';
const dataUrl = `data:text/html;base64,${btoa(arbitraryHtml)}`;

window.open(`https://docs.google.com/viewer?embedded=true&url=${dataUrl}`); // fails

@itsmitchyyy
Copy link

itsmitchyyy commented Oct 21, 2021

Does anyone tried opening .odt file in a viewer? It seems it doesnt support it

@arashster
Copy link

arashster commented Nov 1, 2021

Anyone know if it's possible to get Google Drive Preview to automatically open an Excel sheet hosted online in Google Sheets?

Ex.

https://docs.google.com/viewer?url=https://dornsife.usc.edu/assets/sites/298/docs/ir211wk12sample.xls

But automatically pick the 'Open in Google Sheets' option in the Dropdown.

@inglesuniversal
Copy link

inglesuniversal commented Nov 1, 2021

@arashster I'm looking for the same answer. If I find it, I'll post it here. ok? Good luck!

@quevon24
Copy link

quevon24 commented Nov 5, 2021

Anyone knows if files are stored temporaly or these files are indexed to search engines? There is any alternative?

@inglesuniversal
Copy link

inglesuniversal commented Nov 5, 2021

As far as I know @quevon24 the links are created dynamically and only work by attaching a URL as part of the link, so I see no way of files like these getting indexed or stored elsewhere.

@perelin
Copy link

perelin commented Nov 5, 2021

@quevon24 @inglesuniversal Since the Google Viewer only requests data from Googles servers you can safely assume that the files are at least temporarily uploaded and stored on google servers. I would be careful with 3rd party sensitive data (eg personal GDPR relevant data). Not that google would steal it, but users could be very unhappy if they find out.

@inglesuniversal
Copy link

inglesuniversal commented Nov 6, 2021

@perelin thanks for the added comment... do you suggest or know of a tool that would handle or have the same features that can be hosted on my server perhaps? It is quite cumbersome having all types of formats and trying to have a viewer for each type is quite a trouble. At least for me with my current resources. Thanks again.

@hrvoj3e
Copy link

hrvoj3e commented Jan 12, 2022

@perelin Microsoft One Drive viewer does the same thing so everything you say for Google applies to Microsoft also. Or am I wrong?

quote

Since the Google Viewer only requests data from Googles servers you can safely assume that the files are at least temporarily uploaded and stored on google servers. I would be careful with 3rd party sensitive data (eg personal GDPR relevant data). Not that google would steal it, but users could be very unhappy if they find out.

@perelin
Copy link

perelin commented Jan 12, 2022

@hrvoj3e have not checked yet, but if you post an example link I can have a look

@perelin
Copy link

perelin commented Jan 12, 2022

@inglesuniversal sry for the late reply. I have not seen anything similar that is easy to plug in. for PDFs there are a lot of solutions, but more complicated formats probably would nee some form of Server Side Rendering (docx, etc). If you find somthing: I would be interested myself :)

@samuelkarani
Copy link

samuelkarani commented Jan 27, 2022

I created a more compact functions list for All Google & Non Google documents/files previews and downloads in Javascript here https://gist.github.com/samuelkarani/d850971294629298d4a350d3913607dd

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment