How can I make a button on my Webflow website download a PDF file without redirecting the user or opening a new tab?
- Upload the PDF to Webflow’s Assets panel and copy its URL.
- Add a button, set its link to the PDF URL, and assign it a unique class.
- In the page’s Footer Code, add a script to set the
downloadattribute on the button's link, optionally specifying a custom filename.
To make a Webflow button download a PDF file directly—without opening a new tab or redirecting—the key is setting the correct link settings and file upload behavior.
1. Upload the PDF to Webflow
- Go to the Assets panel in Webflow (press
Jor click the photo icon in the left sidebar). - Upload your PDF file by dragging it in or clicking the upload icon.
- Once uploaded, click the gear icon next to the file to get its URL.
2. Add a Button and Link It Correctly
- Drag in a Button element (or use any link-based element like a text link).
- Select the button, then go to the Element Settings panel (D key).
- Set the link type to “URL” and paste the PDF file URL you copied.
3. Force the File to Download
Add the
downloadattribute to the link. Webflow’s Designer does not let you natively apply thedownloadattribute via the UI, so you need to use a little workaround:Give the button a unique custom class name, e.g.,
download-button.Go to the Page Settings (gear icon next to the page name).
Scroll to the Footer Code section and add this:
``
This script finds the button’s anchor link and adds the
downloadattribute, which tells browsers to download the file instead of opening it.
4. Optional: Rename the Downloaded File
To rename the file when it's downloaded, modify the
downloadattribute like this:``
Replace
YourFileName.pdfwith the name you'd like users to see when downloading.
Summary
To let users download a PDF on button click in Webflow without redirecting or opening a new tab: upload the PDF to Assets, link it to a button, and use custom script to add the download attribute to that link. This forces most browsers to download the file locally.