How can I enable file downloads for PDF and JPEG files in Webflow?
TL;DR
- Upload your PDF or JPEG file to the Webflow Assets panel and copy its URL.
- Add a Link Block or Text Link, paste the file URL, and apply a custom
downloadattribute to that link to trigger a download on click.
To enable file downloads for PDF and JPEG files in Webflow, you need to upload the files and use a properly formatted link that instructs the browser to download instead of open.
1. Upload the File to Webflow
- Go to the Assets panel in the Webflow Designer (keyboard shortcut:
J). - Click the upload icon and choose your PDF or JPEG file.
- Once uploaded, click the file, then click the “Copy Link” button to copy the hosted file's URL.
2. Add a Download Link
- Drag a Link Block or Text Link onto your page.
- With the link selected, go to the Element Settings panel (gear icon).
- Paste the copied asset URL into the
URLfield. - In the same settings panel:
- Check the box labeled “Open in new tab” if desired.
- Add the
downloadattribute manually (see below for how to do this).
3. Add the download Attribute to Force Download
Webflow does not yet support adding the download attribute directly in the Designer UI, so you must use Custom Code:
- Select the link element you added.
- Add a custom attribute under the Element Settings panel:
- Name:
download - Value: leave this field empty
This signals to browsers that the file should be downloaded instead of opened/viewed in the browser.
4. Publish Your Site
- Press Publish and choose your domain.
- Test the link to ensure it initiates a download (it should prompt to save the file).
Summary
To enable file downloads for PDFs or JPEGs in Webflow, upload the file to the Assets panel, create a link to that file, and add a custom attribute named download to the link. This will prompt the browser to download the file instead of opening it.