Stiahnutie súboru pomocou Javascript/jQuery

Použite neviditeľný <iframe>:

<script>
function Download(url) {
    document.getElementById('my_iframe').src = url;
};
</script>

Ak chcete prinútiť prehliadač stiahnuť súbor, ktorý by inak dokázal vykresliť (napríklad HTML alebo textové súbory), musíte serveru nastaviť typ MIME Type na nezmyselnú hodnotu, napríklad application/x-please-download-me alebo alternatívne application/octet-stream, ktorý sa používa pre ľubovoľné binárne dáta.

Ak ho chcete otvoriť iba v novej karte, jediným spôsobom, ako to urobiť, je, aby používateľ klikol na odkaz s atribútom target nastaveným na _blank.

V jQuery:

$('a#someID').attr({target: '_blank', 
                    href  : 'http://localhost/directory/file.pdf'});

Pri každom kliknutí na tento odkaz sa súbor stiahne do novej karty/okna.

Aktualizácia moderných prehliadačov na rok 2019

Tento prístup by som teraz odporúčal s niekoľkými výhradami:

• Vyžaduje sa relatívne moderný prehliadač.
• Ak sa očakáva, že súbor bude veľmi veľký, mali by ste pravdepodobne urobiť niečo podobné ako pri pôvodnom prístupe (iframe a cookie), pretože niektoré z nižšie uvedených operácií by pravdepodobne mohli spotrebovať systémovú pamäť aspoň takú veľkú ako sťahovaný súbor a/alebo iné zaujímavé vedľajšie účinky na procesor.

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(resp => resp.blob())
  .then(blob => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    // the filename you want
    a.download = 'todo-1.json';
    document.body.appendChild(a);
    a.click();
    window.URL.revokeObjectURL(url);
    alert('your file has downloaded!'); // or you know, something with better UX...
  })
  .catch(() => alert('oh no!'));

2012 pôvodný prístup založený na jQuery/iframe/cookie

Vytvoril som plugin jQuery File Download (Demo) (GitHub), ktorý by tiež mohol pomôcť vo vašej situácii. Funguje dosť podobne ako iframe, ale má niekoľko skvelých funkcií, ktoré sa mi celkom hodili:

• Veľmi jednoduché nastavenie s peknými vizuálmi (jQuery UI Dialog, ale nie je potrebný), všetko je tiež testované

• Používateľ nikdy neopustí tú istú stránku, z ktorej inicioval sťahovanie súborov. Táto funkcia sa stáva kľúčovou pre moderné webové aplikácie

• Funkcie successCallback a failCallback umožňujú explicitne určiť, čo používateľ uvidí v oboch situáciách

• V spojení s používateľským rozhraním jQuery môže vývojár jednoducho zobraziť modal informujúci používateľa, že prebieha sťahovanie súboru, rozpustiť modal po začatí sťahovania alebo dokonca priateľským spôsobom informovať používateľa, že došlo k chybe. Príklad tohto postupu nájdete v Demo. Dúfam, že to niekomu pomôže!

Tu je jednoduchá ukážka prípadu použitia s použitím doplnku zdroj s prísľubmi. Stránka demo obsahuje aj mnoho ďalších, 'lepších UX' príkladov.

$.fileDownload('some/file.pdf')
    .done(function () { alert('File download a success!'); })
    .fail(function () { alert('File download failed!'); });

Ak už používate jQuery, môžete ho využiť na vytvorenie menšieho úryvku Verzia odpovede Andrewa v jazyku jQuery:

var $idown;  // Keep it outside of the function, so it's initialized once.
downloadURL : function(url) {
  if ($idown) {
    $idown.attr('src',url);
  } else {
    $idown = $('<iframe>', { id:'idown', src:url }).hide().appendTo('body');
  }
},
//... How to use it:
downloadURL('http://whatever.com/file.pdf');