
HTML atribut download
HTML atribut download zlepšuje uživatelský dojem ze stahovaného souboru.
Zápis
<a href="adresa-souboru" download="Název souboru">
Odkaz
</a>
Podpora
Atribut download funguje jen v některých prohlížečích.
- Chrome 14+
- Firefox 20+
- Opera 15+
Využití
Atribut pro stahování souborů má hned dvě užitečné funkce.
-
Umožňuje nastavit název souboru po stažení na disk.
Cíl odkazu (
href) tedy může být klidně nějaký nesmyslný hash, avšak (v podporovaných prohlížečích) se uloží pod uživatelsky přívětivým jménem, které dodownloadu nastavíme.Příponu souboru je do
downloadu možné zadat, ale není to nutné (přípona se potom převezme ze stahovaného souboru). Stejně tak není nutné zadávat samotný název (převezme se z názvu souboru). -
Atribut
downloadvyvolá dialog pro stahování i u souboru známého typu (obrázek, HTML stránka).Ano, přidáním
downloadu jde snadno nabídnout stažení HTML stránky.Řeší to tedy problém, kdy je cílem nabídnout soubor známého typu rovnou ke stažení. V PHP se to řeší třeba následovně:
header("Content-Type: application/download"); header("Content-Disposition: attachment; filename=$soubor"); header("Content-Length: " . filesize($soubor)); readfile($soubor); -
Stahování lze vyvolat na straně klienta. Stačí obsah uložit do odkazu přes data URL a přidat
download. Po kliknutí prohlížeč nabídne stahování. Ukázka stažení obrázku nakresleného do<canvas>u.
Ukázka
V podporovaných prohlížečích je možné vyzkoušet download přímo v akci:
Stažení souboru v JavaScriptu
Využít download atributu jde i v JS. Je tak možné uživateli umožnit cokoliv stáhnout po kliknutí jako soubor. Ukázka
function download(text, filename) {
const anchor = document.createElement('a');
anchor.style.display = 'none';
anchor.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(text);
anchor.download = filename;
document.body.appendChild(anchor);
anchor.click();
document.body.removeChild(anchor);
}Související články
Zanořování nezanořitelných HTML značek
Jak funguje zanořování značek jako <p> nebo <button> v HTML parseru versus DOM metodách.
Možnosti stylování <iframe>
Co lze a nelze u <iframe> ovlivnit pomocí CSS a jak na změnu textu nebo barev.
