Download File ❺

Download file assets like PDFs or images, rather than displaying them

Goals

• Download a file rather than displaying it

• Work with Webflow's hosting CDN, which is cross-domain and does not support CORS

• Support a custom filename

• Work with both asset-stored files, and CMS-stored

Use Cases

• Download a PDF, rather than displaying it

• Download an image

Demonstration

Demonstration Page

https://sa5-html.webflow.io/file-download

Cloneable

https://webflow.com/made-in-webflow/website/sa5-html

Getting Started

Add the Library

First, add the library as detailed in Quick Start.

Create your Link or Button in Webflow

• Configure the link as a File link

• Reference your asset, or bind it to a CMS file field, depending on your desired setup

Apply Attributes to the Button element

See below for details.

Usage Notes

wfu-download-file = ( filename )

Required. Set the value to the clean filename you want the file downloaded as.

You can specify this as a literal value, or bind the attribute's value to a CMS text field that contains your desired filename.

If you filename specifies an extension, it will be used automatically. If it does not specify an extension, then most browsers will automatically add the extension depending on the file type you are downloading.

Technical Notes

Uses a blob approach to sidestep issues regarding Webflow's cross-domain assets CDN setup, lack of support for custom MIME encoding, and browser CORS restrictions relating to the download attribute.

Testing Notes

	Windows	iOS	Android
Chrome	2025-Jun-01		2025-Jun-01
Edge	2025-Jun-01
Safari	n/a		n/a
Firefox

Future

? Test with multi-image fields

? Use alt text as filename

? Download button in image gallery

? Test with components

Credits

Shout out to Matt Evans and Eric R for discussions that led to the addition of this solution to SA5.