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

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Atribut pattern pro formuláře

Atribut pattern pro formulářové prvky

Validace formulářů regulárními výrazy na straně klienta bez JavaScriptu.

HTML atribut scoped

HTML atribut scoped

HTML 5.1 přichází s možností validně používat element <style> i mimo část <head>.

Autocomplete

Automatické vyplňování formulářů

Pomocí atributu autocomplete jde usnadnit a zrychlit vyplňování formulářů.

Placeholder

HTML atribut placeholder

HTML atribut placeholder slouží k zadání ukázkové hodnoty do formulářového pole.

Noreferrer

Noreferrer

Řetězec rel=noreferrer umožňuje nastavit odkazu, že nemá posílat informace o předešlé navštívené stránce.

Komentáře