htmliframeembedgoogle-docsviewer

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

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.

Solution

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