How do I link pdf files dynamically on a button which can then be downloaded

I need to bind a pdf to a collection per item, which can then be downloaded or just viewed in a new tab.

1 Like

Hi @Quintin :wave:

That’s super straightforward to do in WeWeb :slight_smile:

1- Make sure you have links to your PDFs in your backend

If you already have links to your PDFs in your backend, you can skip this step.

If not, you can use WeWeb to host your PDFs:
upload files to weweb

This way, you can copy the file URL and add the information to the relevant item in your backend:
get link to file

Note that if you’re using Airtable as a backend, the “Attachment” field type is recognized by WeWeb as a URL to the file so you wouldn’t need to upload your files to WeWeb.

2- Bind the field with your URLs to a text element or button element in your Collection List

First, you need to bind your data to a container.

Then, you’ll want to add a repeated text or button.

Finally, on an item, you’ll want to bind the field that contains the URL to the repeated text or button.

In the example below, when a user clicks on the button, the file will open in a new tab and the user will be able to download the PDF or image.

Hey @Joyce ,
When I do that, clicking on the button opens a new tab to show the PDF. Even worse, it opens in Chrome’s Adobe Viewer as on my screenshot.
It may be due to my Chrome’s parameters but anyway, I want to force the direct file download. How is it possible ?

Thanks a lot !

Hi @LivingStoneHgS :wave:

What backend are you using?

Instead of using the “Link to” option, you could create a workflow that makes an API request to your backend to return the file and, in that request, include headers that force the download.

I tryed with Xano. But I will switch on Supabase.
Before that I’ll try your solution ASAP :slightly_smiling_face:

In supabase, you can only do this with some code currently, but it’s fairly simple to get a downloadable link.

Hi Joice, many thanks, could you explain please how can you include headers to directly download the file to user’s computer?. I am migrating to Xano backend. Many thanks! :pray:t2:

Hi @Momuu :wave:

Does this help?

Here’s the JS script @Quentin is using in the video.

Many thanks Joyce! this is perfect! :raised_hands:t2:

1 Like