Vynutit stahování pomocí JavaScriptu

Skripty vynuceného stahování jsou již dlouhou dobu důležitou součástí použitelnosti internetu. Mohu to potvrdit počtem implementací této funkce na straně serveru a popularitou mého příspěvku PHP Force Download, a to až do dnešního dne. Když se webový svět posunul mnohem více na stranu klienta, začal jsem hledat způsob, jak vynutit stahování bez potřeby serveru, a našel jsem to....přímo v ladicím nástroji Firefox DevTools!

Zobrazit ukázku

JavaScript

Funkce k tomu je poměrně malá a spoléhá na URL.createObjectUrl :

function downloadFile(data, fileName, type="text/plain") {
  // Create an invisible A element
  const a = document.createElement("a");
  a.style.display = "none";
  document.body.appendChild(a);

  // Set the HREF to a Blob representation of the data to be downloaded
  a.href = window.URL.createObjectURL(
    new Blob([data], { type })
  );

  // Use download attribute to set set desired file name
  a.setAttribute("download", fileName);

  // Trigger the download by simulating click
  a.click();

  // Cleanup
  window.URL.revokeObjectURL(a.href);
  document.body.removeChild(a);
}

Funkce vloží <a> prvek do těla, nastaví jeho URL na Blob hodnotu na textový obsah cílového souboru a kliknutím na prvek spustí stahování. Prvek zůstává během procesu skrytý a je odstraněn z DOM ihned po click() volání. Jakmile je funkce vyvolána, zobrazí se výzva prohlížeče ke stažení.

Zobrazit ukázku

Těším se, až se dozvím více o obou createObjectURL a Blob; tito dva jsou skutečným kouzlem této techniky!

Požádejte Snehu Jain o implementaci této skvělé techniky v ladicím programu Firefox DevTools!