Problems loading PDF into PDF component

I am not able to get a PDF document stored on google drive to load into the PDF component. It just say in the component "PDF could not be loaded" in red.

My file is publicly shared.

My URL formatting is https://drive.google.com/uc?export=view&id={{ id }}

I have also tried using "export=download" in the URL.

Does anyone know something obvious I am missing because it is strange even googling this is not really turning up results I am finding apply to my situation. I'm thinking CORS might be part of it. I have briefly examined setting it up and it seems rather involved and I feel like trying to do so maybe going down a rabbit hole that isn't actually going to solve my issue.

Yeah it is probably a CORS issue. As a workaround you can create a REST resource to fetch the PDF data, and then reference the base64 data from the REST resource response. Our PDF component supports base64 data. As long as the PDF isn't too large this should be fast enough for your use case. (If you have perf issues, then yeah you're going to need to figure out how to work with CORS.)

Check out the documentation for the pdf.src property here: PDF | Retool Component Library

The reason this works is you're using the Retool backend to fetch the PDF data on your behalf, and since the Retool backend isn't a browser it doesn't have the same CORS limitations.

Thanks @bca I have used the base64 method before. I think I will maybe dig into the CORS issue or more probably, display an image preview(will already have a thumbnail of first page of PDF) and open pdf in browser with an on-click event. Thanks for confirming the CORS thing. I may now stop aimlessly drifting from similar help doc to similar list of google search results all night.

1 Like