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.

Answer 1

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>

Answer 2

This works, no reload issue .

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