# Embed Pdf from Google drive with webview

**URL:** <https://community.glideapps.com/t/embed-pdf-from-google-drive-with-webview/38965>\
**Category:** Ask for Help\
**Created:** [February 25, 2022, 4:53pm UTC](https://community.glideapps.com/t/embed-pdf-from-google-drive-with-webview/38965 "2022-02-25T16:53:32Z")\
**Posts on this page:** 13\
**Page:** 3

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [February 28, 2022, 8:26am UTC](https://community.glideapps.com/t/embed-pdf-from-google-drive-with-webview/38965/41 "2022-02-28T08:26:28Z")

</div>

yes, button can trigger a google script to do that

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [February 28, 2022, 8:29am UTC](https://community.glideapps.com/t/embed-pdf-from-google-drive-with-webview/38965/42 "2022-02-28T08:29:16Z")

</div>

I must hang out for a while. I’ll talk later. Thanks, Uzo.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [February 28, 2022, 10:54am UTC](https://community.glideapps.com/t/embed-pdf-from-google-drive-with-webview/38965/43 "2022-02-28T10:54:48Z")

</div>

Try this demo, it uploading directly to my Google drive, and displays in Glide as a image element or inline list, PDF, jpeg. gif or png

> **[TEST](https://test-gl.glideapp.io/)**

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [February 28, 2022, 11:43am UTC](https://community.glideapps.com/t/embed-pdf-from-google-drive-with-webview/38965/44 "2022-02-28T11:43:35Z")

</div>

It turned out that my initial guess was right, you were using Html and app scripts. I’ve tried it before, with a form like a form with an open link button. I’ll probably try again with the webview component.  
You haven’t slept, bro?  
This is what I got from the internet before.

 ![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/3/33c3ceee5242f96e22dfdde10de4104954cd9d15.png)

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [February 28, 2022, 1:53pm UTC](https://community.glideapps.com/t/embed-pdf-from-google-drive-with-webview/38965/45 "2022-02-28T13:53:18Z")

</div>

> [@Himaladin](#):
>
> what happens is the Html display, except for the files uploaded to Glide

I feel like we got way off topic here.

So you still have the issue with the HTML display? Based on an earlier post, I thought you had figured that out, so it wasn’t an issue for you anymore. I still had the issue myself, so I used a different url structure with the same file ID.

I’m usually the one adding the links to the PDF’s, so if one url doesn’t work, then I try a different one. I don’t have a fully automatic process to handle the url structure. All I’m doing is wrapping whatever url I get…whether the user manually entered the url to an external location, or it was uploaded to glides storage.  
However, if you are asking how to handle switching from a `/file/d` url structure to a `/uc?id=` url structure, then all you need is a template column to replace that part of the url.

- First obtain the url for the location of the pdf
- Create a template column that uses that url as the template source, and then create a replacement to replace `/file/d` with `/uc?id=`. This should really only change urls that come from google drive. Nothing will be replaced in any of the other url structures are used, or the file is not being stored in google drive.
- Create any other replacements in that template column as needed.
- Finally create another template column to wrap that updated url with the google doc viewer.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [February 28, 2022, 2:39pm UTC](https://community.glideapps.com/t/embed-pdf-from-google-drive-with-webview/38965/46 "2022-02-28T14:39:04Z")

</div>

Yeah, I’ve done it with a regex to extract and a template columns.  
I think there is still a way to solve 3 different URL structures because of your previous statement. This means that the user must upload / share a homogeneous URL.

Thank you. Nice to discuss with you.

And there was a discussion that was a little off topic, just to comfort Uzo who was having trouble sleeping 🤣🤣🤣.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [March 1, 2022, 6:49pm UTC](https://community.glideapps.com/t/embed-pdf-from-google-drive-with-webview/38965/47 "2022-03-01T18:49:22Z")

</div>

@Jeff_Hager, as additional info: I just opened a file with a size of 28.4MB, it turns out that Google Doc viewer does not allow preview because the file size is too large. But if you use “/preview” it’s still smooth. Thanks.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [March 1, 2022, 7:29pm UTC](https://community.glideapps.com/t/embed-pdf-from-google-drive-with-webview/38965/48 "2022-03-01T19:29:47Z")

</div>

Good to know. Thanks for the heads up!

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [March 8, 2022, 3:03am UTC](https://community.glideapps.com/t/embed-pdf-from-google-drive-with-webview/38965/49 "2022-03-08T03:03:27Z")

</div>

Hi @Jeff_Hager, @ThinhDinh

Have you ever tried with Adobe? Is it possible?

> **[Easily Embed PDFs into Your Website Using Adobe Document Cloud View SDK](https://medium.com/adobetech/easily-embed-pdf-into-your-website-using-adobe-document-cloud-view-sdk-3a40094f27b6)**
>
> Learn how to easily embed PDFs into your websites using Adobe Document Cloud View SDK with a client-side viewer.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [March 13, 2022, 11:49pm UTC](https://community.glideapps.com/t/embed-pdf-from-google-drive-with-webview/38965/50 "2022-03-13T23:49:37Z")

</div>

I haven’t tried it before, but looking at there demo site, it appears that the code that’s generated uses javascript which isn’t allowed directly in glide. So I’m not sure if you could directly embed into glide using the code that’s generated from their demo site. Plus when I tried, I got the “could not embed” message. You could possibly create your own separate website that uses adobe’s embed code, but then it’s probably not as dynamic as you would want it to be as if it were within glide. I’m not seeing how adobe’s viewer could effectively be used in a glide app.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [March 15, 2022, 1:21pm UTC](https://community.glideapps.com/t/embed-pdf-from-google-drive-with-webview/38965/51 "2022-03-15T13:21:43Z")

</div>

Yeah, I gave up too.

---

<div class="post-metadata">

**Author:** ![Blue\_Community](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/blue_community/32/16616_2.png) [@Blue\_Community](https://community.glideapps.com/u/Blue_Community)\
**Post date:** [May 26, 2022, 9:00pm UTC](https://community.glideapps.com/t/embed-pdf-from-google-drive-with-webview/38965/52 "2022-05-26T21:00:59Z")

</div>

Do this… Upload your pdfs to a folder in drive and set the folder to public  
Get the File Cabinet Extension from Awesome Table - create a new sheet in that folder  
In that sheet run the extension on that folder and you will get a list of files - Add a column for book cover and just add the thumbnails as the cover…  
Now…wrap your app around that sheet and now add a glide column called DocsTemplate and in that template column type  
[https://docs.google.com/viewer?embedded=true&url={document}](https://docs.google.com/viewer?embedded=true&url=%7Bdocument%7D)  
substitute {document} with the URL of file inside drive

example I made this way… the [Works of Kierkegaard](https://kierkegaard.glideapp.io)  
 ![kierkegaard](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/6/963e1b492ded1a649d65cf93d2e19e06d7da46e0.gif)  
hope this helps…

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 27, 2022, 5:18am UTC](https://community.glideapps.com/t/embed-pdf-from-google-drive-with-webview/38965/53 "2022-05-27T05:18:29Z")

</div>

Hi, @Blue_Community, thanks for sharing.  
Lastly, I prefer to use URLs that end in “preview”, a URL structure that is already provided by Google and works well.

[Previous page](https://community.glideapps.com/t/embed-pdf-from-google-drive-with-webview/38965.md?page=2)
