download

Value

The download attribute can take no value (that is, a boolean attribute) or a string:

• When written in boolean form, the browser will suggest a filename/extension to download the resource with, generated from various sources:
  • The Content-Disposition HTTP header
  • The final segment in the URL path
  • The media type (from the Content-Type header, the start of a data: URL, or Blob.type for a blob: URL)
• When written with a string value, the browser will use that string as a suggested filename when downloading. / and \ characters are converted to underscores (_). Filesystems may forbid other characters in filenames, so browsers will adjust the suggested name if necessary.

Description

The download attribute only works for same-origin URLs, or the blob: and data: schemes.

How browsers treat downloads varies by browser, user settings, and other factors. The user may be prompted before a download starts, or the file may be saved automatically, or it may open automatically, either in an external application or in the browser itself.

If the Content-Disposition header has different information from the download attribute, resulting behavior may differ:

• If the header specifies a filename, it takes priority over a filename specified in the download attribute.
• If the header specifies a disposition of inline, Chrome and Firefox prioritize the attribute and treat it as a download.

Examples

Demonstrating the effect of download

This example shows the difference in behavior caused by the download attribute.

html,
body {
  height: 100%;
}

svg {
  height: 100px;
}

body {
  dusplay: flex;
}

HTML

In this example, we present two very similar SVG links that point to the same data: URL, which encodes a read heart-shape image. The first one doesn't include the download attribute and has the link text "Display my image". The second one does include the download attribute and has the link text "Download my image".

<svg viewBox="0 0 160 40" xmlns="http://www.w3.org/2000/svg">
  <a
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 85 C20 55 5 35 5 22 C5 8 15 0 28 0 C36 0 44 5 50 14 C56 5 64 0 72 0 C85 0 95 8 95 22 C95 35 80 55 50 85Z' fill='%23e03'/%3E%3C/svg%3E">
    <text x="10" y="25">Display my image</text>
  </a>
</svg>

<hr />

<svg viewBox="0 0 160 40" xmlns="http://www.w3.org/2000/svg">
  <a
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 85 C20 55 5 35 5 22 C5 8 15 0 28 0 C36 0 44 5 50 14 C56 5 64 0 72 0 C85 0 95 8 95 22 C95 35 80 55 50 85Z' fill='%23e03'/%3E%3C/svg%3E"
    download="heart.svg">
    <text x="10" y="25">Download my image</text>
  </a>
</svg>

Result

Click on the two links to see the difference in effect. The first one, when clicked, will navigate to the linked image and display it in the embedded document. The second one, when clicked, will trigger the image to be downloaded.

Specifications

Browser compatibility

See also

• <a>
• href