The download attribute in HTML works by forcing a file to be downloaded rather than displayed in the browser. When added to an anchor () tag, it tells the browser to prompt the user to save the linked resource as a file instead of navigating to it. It can also be used to specify a custom filename for the downloaded file. However, its functionality is limited to same-origin links and certain file types, and it may behave differently across browsers or fail with cross-origin content due to security restrictions. 1. Use download to force a download instead of previewing files like PDFs or images. 2. Apply a custom filename using download="preferred-name". 3. Be aware of limitations such as cross-origin restrictions, required href attribute, and inconsistent browser support especially on Safari iOS. 4. Troubleshoot issues by checking for correct usage, server headers, and browser compatibility.
When you click a link on a webpage, usually it takes you to another page or resource. But sometimes, instead of navigating, you want the browser to download a file. That’s where the download
attribute on an anchor (<a></a>
) tag comes in handy.

How does the download
attribute work?
The download
attribute tells the browser that clicking the link should trigger a download instead of opening the file in the browser. Without this attribute, some files (like images or PDFs) might just open directly in the tab.
For example:

<a href="example.pdf" download>Download PDF</a>
Clicking this link will prompt the user to download example.pdf
instead of viewing it in the browser.
You can also specify a custom filename by giving the attribute a value:

<a href="files/report.pdf" download="weekly-report.pdf">Download Weekly Report</a>
This way, the downloaded file will be named weekly-report.pdf
, regardless of its original name on the server.
When should you use the download
attribute?
To force a download instead of previewing content
For files like PDFs, images, or text files, browsers may choose to display them inline. Usingdownload
ensures users get a save dialog instead.To rename files before download
If your server has generic names likedocument123.pdf
, you can usedownload="your-preferred-name.pdf"
to give users a more meaningful filename.When linking to files from other domains (with limitations)
You can usedownload
with external URLs, but there are security restrictions. For example, cross-origin downloads won’t work if the server doesn’t allow it.
Some things to keep in mind:
- It only works for same-origin links or certain types of files.
- Not all file types or browsers respect the
download
attribute consistently. - It doesn’t work on
<a></a>
tags without anhref
.
Common issues and troubleshooting
If the download
attribute isn’t working as expected, here are a few possible reasons:
Cross-origin restrictions:
If the file is hosted on another domain and that domain doesn’t allow downloads via headers, the attribute will be ignored.Incorrect usage:
Make sure the<a></a>
tag has bothhref
anddownload
. Just havingdownload
withouthref
won't do anything.Browser support quirks:
Most modern browsers supportdownload
, but older ones (like IE) don’t. Also, Safari on iOS treats most downloads as "Open in..." actions due to system-level limitations.
So, basically, the download
attribute gives you control over when and how a file gets downloaded. It's not complicated, but it's easy to overlook the edge cases like cross-origin rules or browser compatibility.
The above is the detailed content of What is the download attribute on an anchor tag?. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

ToimplementdarkmodeinCSSeffectively,useCSSvariablesforthemecolors,detectsystempreferenceswithprefers-color-scheme,addamanualtogglebutton,andhandleimagesandbackgroundsthoughtfully.1.DefineCSSvariablesforlightanddarkthemestomanagecolorsefficiently.2.Us

The topic differencebetweenem, Rem, PX, andViewportunits (VH, VW) LiesintheirreFerencepoint: PXISFixedandbasedonpixelvalues, emissrelative EtothefontsizeFheelementoritsparent, Remisrelelatotherootfontsize, AndVH/VwarebaseDontheviewporttimensions.1.PXoffersprecis

Choosing the correct display value in CSS is crucial because it controls the behavior of elements in the layout. 1.inline: Make elements flow like text, without occupying a single line, and cannot directly set width and height, suitable for elements in text, such as; 2.block: Make elements exclusively occupy one line and occupy all width, can set width and height and inner and outer margins, suitable for structured elements, such as; 3.inline-block: has both block characteristics and inline layout, can set size but still display in the same line, suitable for horizontal layouts that require consistent spacing; 4.flex: Modern layout mode, suitable for containers, easy to achieve alignment and distribution through justify-content, align-items and other attributes, yes

CSSHoudini is a set of APIs that allow developers to directly manipulate and extend the browser's style processing flow through JavaScript. 1. PaintWorklet controls element drawing; 2. LayoutWorklet custom layout logic; 3. AnimationWorklet implements high-performance animation; 4. Parser&TypedOM efficiently operates CSS properties; 5. Properties&ValuesAPI registers custom properties; 6. FontMetricsAPI obtains font information. It allows developers to expand CSS in unprecedented ways, achieve effects such as wave backgrounds, and have good performance and flexibility

ReactivitytransforminVue3aimedtosimplifyhandlingreactivedatabyautomaticallytrackingandmanagingreactivitywithoutrequiringmanualref()or.valueusage.Itsoughttoreduceboilerplateandimprovecodereadabilitybytreatingvariableslikeletandconstasautomaticallyreac

CSSgradientsenhancebackgroundswithdepthandvisualappeal.1.Startwithlineargradientsforsmoothcolortransitionsalongaline,specifyingdirectionandcolorstops.2.Useradialgradientsforcirculareffects,adjustingshapeandcenterposition.3.Layermultiplegradientstocre

The key to maintaining CSS for large applications is organizational structure, naming specifications, and tool assistance. First, adopt component management, split styles and implement local scopes to avoid conflicts; second, unify naming specifications such as BEM, SMACSS or namespace prefixes to improve maintainability; third, use PostCSS, stylelint and other tools to achieve automated processing and code quality control. Although these methods are not complicated, they require teamwork and continuous maintenance to be effectively implemented.

Creating print-specific stylesheets using CSS ensures that web pages are effective on the screen and when printing. First, use the @mediaprint rule to define styles that only take effect when printing, such as hiding the navigation bar, footer and sidebar; second, you can link a separate print style sheet print.css to keep style maintenance clearer; finally optimize readability and simplicity, such as removing background colors, using serif fonts, displaying link URLs, and adjusting the layout to adapt to paper characteristics.
