Skip to content

Instantly share code, notes, and snippets.

@tzmartin
Last active March 26, 2024 06:33
Show Gist options
  • Save tzmartin/1cf85dc3d975f94cfddc04bc0dd399be to your computer and use it in GitHub Desktop.
Save tzmartin/1cf85dc3d975f94cfddc04bc0dd399be to your computer and use it in GitHub Desktop.
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/

@FMRb
Copy link

FMRb commented Nov 16, 2020

Hi,
how do you generate the embedded link for the OneDrive's PowerPoint? do you know if you can embed OneDrive business files the same way? Is there any to generate the link programmatically through a Microsoft API?

Thanks.

@gabrielponto
Copy link

I think that Office Web Apps Viewer doesn't work anymore. It always returns error

@caubai317
Copy link

You can create easily a file embedded (docx, pdf,...) with this link
https://support.google.com/docs/answer/183965?hl=en&visit_id=637455190577404378-3912222059&rd=1
For example:
a docx file in my gg drive will be:

<iframe src="https://drive.google.com/file/d/1brUTS9Q0ZibYjER6x0goHyejf1CtJxRh/preview" width="640" height="480"></iframe>

@kalico1
Copy link

kalico1 commented Feb 26, 2021

You can create easily a file embedded (docx, pdf,...) with this link
https://support.google.com/docs/answer/183965?hl=en&visit_id=637455190577404378-3912222059&rd=1
For example:
a docx file in my gg drive will be:

<iframe src="https://drive.google.com/file/d/1brUTS9Q0ZibYjER6x0goHyejf1CtJxRh/preview" width="640" height="480"></iframe>

This solution worked for me. Thanks!

@zqdevelopment
Copy link

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

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

@arashster
Copy link

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

@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

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

@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

@halfnibble
Copy link

I've been working in the web sphere for way too long, so I feel silly asking but...
What is [DOMINIO]? Thanks.

@inglesuniversal
Copy link

Hello @halfnibble "dominio" is the Spanish translation of "domain" which as you know is the actual website name e.g. google.com ---> Hope this info is helpful.

@fabianareisantos
Copy link

Hi, is there a way to increase the limit of 25mb?

@neilmenon
Copy link

@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.

This is a great note - beware of using this solution if your're handling PII in your application. It's a bit concerning, even the widely popular chrome extension uses this server-side data passing to Google. What Google does with the data parsed through this viewer no one knows...

@NaveenDA
Copy link

NaveenDA commented Jan 5, 2023

@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.

This is a great note - beware of using this solution if your're handling PII in your application. It's a bit concerning, even the widely popular chrome extension uses this server-side data passing to Google. What Google does with the data parsed through this viewer no one knows...

@neilmenon I totally agree, we should beware.

@seanhurwitz
Copy link

seanhurwitz commented Jan 27, 2023

@fabianareisantos: Hi, is there a way to increase the limit of 25mb?

Also wondering. did you get any help here?

@jesseagleboy
Copy link

Since the Labnol link in the document seems to be a 404, I think this new link from Labnol will be a huge help for anyone using the Google Docs: https://www.labnol.org/internet/direct-links-for-google-drive/28356/

@inglesuniversal
Copy link

Thanks for sharing @jesseagleboy we all appreciate any improvements to our knowledge base

@thaotp
Copy link

thaotp commented May 12, 2023

@tzmartin
Thank you for sharing.
Can I use those URLs for commercial purposes?

@perelin
Copy link

perelin commented May 12, 2023

@thaotp A lot of people using these tools, especially Google Docs Viewer, in their commercial applications. Google at least does not offer any dedicates Term&Conditions, which makes it a bit of a legal greyish area. Be aware: using these tools means sending data to the respective companies (Google, Microsoft), so be careful with user-related/-generated data, especially if you are under a privacy legislation such as GDPR.

@1TheMuffinMan
Copy link

Anyone know if there is a way with the google doc viewer to set the language in the url?

@thaotp
Copy link

thaotp commented May 15, 2023

especially Google Docs Viewer, in their commercial applications

@perelin
Thank you for your answer.
But could you show me some commercial applications which you've mentioned above?

@perelin
Copy link

perelin commented May 15, 2023

@thaotp I remember seeing it in a GDPR compliance tool I was using some time ago. These guys also use it: https://wordpress.org/plugins/embed-any-document/

@nakarimi
Copy link

Is there any limitation for embeding a file by google viewer?

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

or

<iframe src="https://docs.google.com/gview?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" 
  style="width:600px; height:500px;" frameborder="0"></iframe>

randomly stop loading, but after realod again load the iframe.
If you set an iframe and refresh the page for some times, after 2-4-6 any posibility then suddenlty stop from loading the iframe, and again refersh then it is loading.

Is there any limiation or setting to set?

@devsideal
Copy link

devsideal commented Aug 19, 2023

Any one know how to view pdf with multiple pram like:

pdfUrl = "https://sadgh.invoicepdf?id=123&charges=12.4";
completeUrl = "https://docs.google.com/gview?embedded=true&url=${pdfUrl}"

I'm expecting the completeUrl should able to view pdf with requested parameter id and charges, But its not working
However the pdfUrl is able to generate pdf file with given param.

@korenevskiy
Copy link

The file I have saved with the name http://site.com/H8EBCDF How do I set a readable name (and extension) in the viewer? Maybe you need to specify an attribute in the viewer's address?

@LazZiya
Copy link

LazZiya commented Sep 5, 2023

Any idea how to embed the viewer so it switch between multiple files while in full screen mode? same as attachments in gmail...

@panwaranuj01
Copy link

panwaranuj01 commented Oct 23, 2023

I'm getting csp error

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'report-sample' 'nonce-xBproPZJNJgeAtDdKA4_bw' 'unsafe-inline' 'strict-dynamic' https: http: 'unsafe-eval'". Note that 'unsafe-inline' is ignored if either a hash or nonce value is present in the source list.
<iframe src="https://docs.google.com/viewer?url=https://km-test-s3-bucket.s3.amazonaws.com/KOMMUNICATE/APP/test/1ec30c318f5f1b55a74c50843d55398fc/_Attachment/78cc4437-438c-47af-a074-b40bac132df2_42508155ee50569f959f5c00644cbd09d629e7ec_KM_BUCKET_file_example_XLS_10.xls&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>

Can anyone help please

@btambawala
Copy link

I'm getting csp error

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'report-sample' 'nonce-xBproPZJNJgeAtDdKA4_bw' 'unsafe-inline' 'strict-dynamic' https: http: 'unsafe-eval'". Note that 'unsafe-inline' is ignored if either a hash or nonce value is present in the source list.
<iframe src="https://docs.google.com/viewer?url=https://km-test-s3-bucket.s3.amazonaws.com/KOMMUNICATE/APP/test/1ec30c318f5f1b55a74c50843d55398fc/_Attachment/78cc4437-438c-47af-a074-b40bac132df2_42508155ee50569f959f5c00644cbd09d629e7ec_KM_BUCKET_file_example_XLS_10.xls&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>

Can anyone help please

I am also getting the same error, did you find any solution?

@crsedano
Copy link

crsedano commented Jan 7, 2024

I'm getting csp error

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'report-sample' 'nonce-xBproPZJNJgeAtDdKA4_bw' 'unsafe-inline' 'strict-dynamic' https: http: 'unsafe-eval'". Note that 'unsafe-inline' is ignored if either a hash or nonce value is present in the source list.
<iframe src="https://docs.google.com/viewer?url=https://km-test-s3-bucket.s3.amazonaws.com/KOMMUNICATE/APP/test/1ec30c318f5f1b55a74c50843d55398fc/_Attachment/78cc4437-438c-47af-a074-b40bac132df2_42508155ee50569f959f5c00644cbd09d629e7ec_KM_BUCKET_file_example_XLS_10.xls&embedded=true" style="width:600px; height:500px;" frameborder="0"></iframe>

Can anyone help please

I am also getting the same error, did you find any solution?
hi, did you find any solution?

@saravanapriyanm
Copy link

Lately we are getting a lot of Not Found errors using this:

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

It happens randomly and goes away randomly. Any ideas on what might be the problem?

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