Display File from Google Drive using docs.google.com/gview Embedded in iFrame

Question

I have a file saved in google drive.

I want to display it on a website embedded in an iframe.

I'm trying to use the google docs viewer, but can't quite get it to work.

<iframe src="https://docs.google.com/gview?url={fileUrl}&embedded=true"></iframe>

If I copy the file to an s3 bucket (or anywhere else other than google drive) and use an external link such as https://s3.../filename.ext for the fileUrl - it works!

But I can't figure out what link to use from Google Drive. The share and edit links don't work.

https://drive.google.com/open?id={fileId} Share Link.
https://docs.google.com/document/d/{fileId}/edit Open/Edit Link.

Derek Soike · Accepted Answer · 2017-01-05 00:55:50Z

After a lot of trial and error with a bunch of google drive/docs links, I figured it out.

The trick is using the direct download link. https://drive.google.com/uc?id={fileId}

So your iframe src should look like this:

<iframe src="https://docs.google.com/gview?url=https://drive.google.com/uc?id={fileId}&embedded=true"></iframe>

ironspider_7 · Accepted Answer · 2021-03-23 19:36:43Z

2

This works, no reload issue .

https://drive.google.com/file/d/(YOUR_FILE_ID)/preview

answered Mar 23, 2021 at 19:36

ironspider_7

212 bronze badges

1 Comment

Oluwaseye Over a year ago

In 2024. This works. Thank you

Collectives™ on Stack Overflow

Display File from Google Drive using docs.google.com/gview Embedded in iFrame

2 Answers 2

1 Comment

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Related