Moderní tvorba webových aplikací

O webu

HTML atribut download

HTML atribut download zlepšuje uživatelský dojem ze stahovaného souboru.

3 minuty

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.

  1. 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é do downloadu 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).

  2. Atribut download vyvolá 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);
  3. 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

Odeslání formuláře tlačítkem mimo něj

Jak odeslat formulář tlačítkem, které je mimo formulář.

3 minuty

Query string v URL

Řetězec dotazu je část URL za otazníkem obsahující nejrůznější parametry.

10 minut

Resetování <input type=file>

Jak resetovat (odstranit) hodnotu z <input>u pro upload souborů.

3 minuty

HTML/CSS/JS identifikátor id

K čemu se hodí identifikátor, kdy ho používat a jaké znaky může obsahovat.

5 minut

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025