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ázkuJavaScript
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í.
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!