Failo atsisiuntimas naudojant Javascript/jQuery

Naudokite nematomą <iframe>:

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

Norėdami priversti naršyklę atsisiųsti failą, kurį ji kitu atveju galėtų atvaizduoti (pvz., HTML ar tekstinius failus), turite nustatyti, kad serveris failo MIME Type reikšmę pakeistų į beprasmę, pavyzdžiui, application/x-please-download-me arba application/octet-stream, kuri naudojama bet kokiems dvejetainiams duomenims.

Jei norite tik atidaryti jį naujame skirtuke, vienintelis būdas tai padaryti - naudotojui spustelėti nuorodą, kurios atributas Target yra _blank.

"jQuery":

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

Paspaudus šią nuorodą, failas bus atsisiųstas į naują skirtuką / langą.

2019 m. modernių naršyklių atnaujinimas

Šį metodą dabar rekomenduočiau su keliomis išlygomis:

• Reikalinga gana moderni naršyklė.
• Jei tikimasi, kad failas bus labai didelis, greičiausiai turėtumėte daryti kažką panašaus į pradinį metodą (iframe ir slapukas), nes kai kurios iš toliau nurodytų operacijų gali sunaudoti sistemos atminties bent jau tiek pat, kiek atsisiunčiamas failas, ir (arba) turėti kitų įdomių šalutinių poveikių procesoriui.

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 m. originalus jQuery/iframe/cookie pagrįstas metodas

Sukūriau jQuery File Download įskiepį (Demo) (GitHub), kuris taip pat galėtų padėti jūsų situacijoje. Jis veikia gana panašiai su iframe, tačiau turi keletą puikių funkcijų, kurios man pasirodė gana patogios:

• Labai lengva nustatyti su gražiu vaizdu (jQuery UI dialogas, bet nebūtinas), viskas taip pat išbandyta.

• Vartotojas niekada neišeina iš to paties puslapio, iš kurio inicijavo failo atsisiuntimą. Ši funkcija tampa labai svarbi šiuolaikinėms žiniatinklio programoms

• successCallback ir failCallback funkcijos leidžia aiškiai nurodyti, ką naudotojas mato bet kurioje situacijoje

• Kartu su "jQuery UI" kūrėjas gali lengvai rodyti modalinį langą, kuriame naudotojui pranešama, kad vyksta failo atsisiuntimas, išskleisti modalinį langą pradėjus atsisiuntimą arba net draugiškai informuoti naudotoją, kad įvyko klaida. Žr. Demo, kur pateikiamas toks pavyzdys. Tikimės, kad tai kam nors padės!

Štai paprastas naudojimo atvejo demonstracinis pavyzdys, kuriame naudojamas įskiepis šaltinis su pažadais. Demo puslapyje demo yra ir daug kitų, 'geresnių UX' pavyzdžių.

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

Jei jau naudojate "jQuery", galite pasinaudoti ja ir sukurti mažesnę fragmentą Andrew's atsakymo jQuery versija:

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