Embed PDF File Hosted on Google Drive on Website

Question

There is a team drive full of PDFs.

I have set up oauth2 and can successfully login users. They can then enter in a file Id and my site will return all of the metadata for that file.

However I cannot seem to embed this PDF file. In the metadata there are two urls:

• webContentLink
• webViewLink

I tried creating an iFrame with both links but neither work.

Is this even possible to do?

I am using JS to do all of this and I am requesting the https://www.googleapis.com/auth/drive.metadata.readonly scope.

Answer 1

webContentLink and the embeddable link have minor differences.

webContentLink:

https://drive.google.com/file/d/PDF_DRIVE_ID/view?usp=drivesdk

Embed URL:

https://drive.google.com/file/d/PDF_DRIVE_ID/preview

Right now, I haven't seen a direct API method to fetch the embedabble link but if you plan to do this by code, you can just manipulate the webContentLink so that it removes the view?usp=drivesdk part and replace it with preview.

Sample snippet:

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

Answer 2

You can do this with an object tag like so:

<object data="https://drive.google.com/file/d/[id]/preview" type="application/pdf" width="100%" height="500px"></object>

Here's a nice place you can try that.

https://www.w3docs.com/tools/code-editor/1085