How can I make a button on my Webflow website download a PDF file without redirecting the user or opening a new tab?
TL;DR
- Upload the PDF to Assets, copy its URL, and append
?dl=1to it. - Link your Webflow button to this modified URL for basic download functionality.
- For consistent downloads across browsers, add an invisible
<a download>link and trigger it with JavaScript from the button click.
To allow a button on your Webflow site to download a PDF file directly (without opening a new tab or redirecting), you’ll need to configure both your file link and the button properly.
1. Upload the PDF File to Webflow
- Go to the Webflow Designer for your project.
- Open the Assets panel (press
Jor click the paperclip icon). - Drag and drop your PDF into the Assets panel.
- After upload, right-click the file in Assets and click "Copy URL". This gives you a direct link to the hosted PDF.
2. Add a Button Element
- Drag a Button element into your design where you'd like the download to appear.
- With the button selected, go to the Element Settings panel (gear icon in the right sidebar).
3. Convert Button to a Download Link
- Under Link Settings, choose "URL".
- Paste the copied URL of the PDF into the URL field.
- At the end of the URL, manually add the
?dl=1query parameter (e.g.,https://cdn.prod.website-files.com/yourfilename.pdf?dl=1). - IMPORTANT: Webflow does not natively support the HTML
downloadattribute, so this?dl=1trick works for hosted files in many cases — but it’s not guaranteed for all browsers.
4. Optional: Use Custom Code for Reliable Results
For more reliable forced downloads, especially if the above doesn’t trigger a download in all browsers:
- Add an Embed element next to the button.
- In the embed code, include a link with the
downloadattribute like:
<a href="YOURPDFURL" download id="custom-download-btn"></a>
- Then, give your Webflow button an ID like
my-buttonand add this script in Page Settings > Before </body> tag:
document.getElementById('my-button').addEventListener('click', function() { document.getElementById('custom-download-btn').click(); });
This makes the Webflow button trigger the invisible download link, mimicking the download attribute effect.
Summary
To create a download button for a PDF in Webflow:
- Upload the PDF in Assets and copy its URL.
- Set your button’s link to that URL with
?dl=1at the end. - For more consistent download behavior, use an invisible link with the download attribute and trigger it using JavaScript.
This avoids opening new tabs and starts the download directly for most users.