HTML atribut download

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);
}