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

@vyscond

This comment has been minimized.

Copy link

vyscond 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?

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.