Automatically Download a PDF

Hi…

I’m looking to do something pretty straightforward. I just want to add a pdf to Webflow to automatically download when the button is clicked. Can someone tell me how to do this really quickly?

Thanks!!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Quick = zip the pdf file

Even if zipped, how do I use a link to auto-download the file when pressed?

You’ll have to host the file from a public-accessible server like dropbox or similar. Then snag the destination url and use an external link in Webflow. It’s an annoying workaround. You can vote to add this as a feature but it’ll probably never happen :confused:

https://wishlist.webflow.com/ideas/WEBFLOW-I-1169

I did something a couple of years ago inside Webflow. I can’t remember exactly what I did. I used a button to trigger a modal, and the modal had a form, submitting the form triggered the download.

In the link or button settings just select the attachment :paperclip: icon, and then upload your PDF.

Link Settings
image

Button Settings
image

1 Like

@Citrus 's answer is the logical one for Webflow, but the links Webflow generates do not include the download attribute and even if they did, browsers exercise their own decision-making here. Most would just display the PDF on-screen.

@Port_of_Folio has the only answer I know will currently work for Webflow if you want to force a download by the browser. I use Google Drive for this, here are the details;

Demo + cloneable;

1 Like

@Citrus @Port_of_Folio @memetican

What if I want there to be a sign up button to capture the users name and email for allowing download?

Can you set up the link to appear in the success message of a form? Just a thought, but I’m not sure what the arrangement is for your content.

Or the form submission can send you their email address and you can then send them the link or the file itself.

2 Likes

With the Google Drive approach, you only need the link, no special attributes- so I wonder if you could actually use the form redirect Url for this. They should only be redirected after a successful form submit.

Then the message just reads “thank you, your download will begin shortly.”

1 Like

Brilliant, and saves a click. I’ve never noticed/used that before.

I’ve found using the form redirect as a mechanism to download files as not very reliable in the past.

Unless things have changed, it’s probably not going to work as expected.

There are some issues with Webflow forms when you don’t want to have any form inputs (just use the form button). They are workaround-able, but still exist. Of course, you could just add your own form through an embed or add it to the form action.

Beyond that, where you host your files is also dependent upon your success.

To force a download on a users computer you have to have the correct HTTP headers in your response.

…and typically, you don’t control that.

IIRC with Google Drive they do silly things like always set your header to text/html as your content type no matter what type of file it is.

There is a workaround with G Drive, but you have to munge the download URL yourself. Here’s a good walk through of that.

Dropbox has some workarounds for this that give you more control but IIRC they too munge things in unexpected and difficult ways.

Something like AWS s3 is more flexible by manually setting the HTTP headers, but that setup is more complex.

The ‘attachment’ option seems to have been removed

Thank you! Super helpful!