Minulla on hyvin samankaltainen vaatimus täällä.
Minun on saatava käyttäjän selain aloittamaan lataus manuaalisesti, kun $('a#someID').click();
Mutta en voi käyttää window.href
-metodia, koska se korvaa nykyisen sivun sisällön tiedostolla, jota yritetään ladata.
Sen sijaan haluan avata latauksen uudessa ikkunassa/välilehdessä. Miten tämä on mahdollista?
Käytä näkymätöntä <iframe>
:
<iframe id="my_iframe" style="display:none;"></iframe>
<script>
function Download(url) {
document.getElementById('my_iframe').src = url;
};
</script>
Jos haluat pakottaa selaimen lataamaan tiedoston, jonka se muutoin pystyisi esittämään (kuten HTML- tai tekstitiedostot), palvelimen on asetettava tiedoston MIME Type arvoksi jokin järjetön arvo, kuten application/x-please-download-me
tai vaihtoehtoisesti application/octet-stream
, jota käytetään mielivaltaiseen binääridataan.
Jos haluat vain avata sen uuteen välilehteen, ainoa tapa tehdä se on, että käyttäjä napsauttaa linkkiä, jonka target
-attribuutiksi on asetettu _blank
.
JQueryssä:
$('a#someID').attr({target: '_blank',
href : 'http://localhost/directory/file.pdf'});
Aina kun linkkiä napsautetaan, tiedosto ladataan uuteen välilehteen/ikkunaan.
2019 modernien selainten päivitys
Tätä lähestymistapaa suosittelen nyt muutamin varauksin:
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 alkuperäinen jQuery/iframe/cookie-pohjainen lähestymistapa
Olen luonut jQuery File Download plugin (Demo) (GitHub), joka voisi myös auttaa tilanteessasi. Se toimii melko samalla tavalla iframen kanssa, mutta siinä on joitakin hienoja ominaisuuksia, jotka olen havainnut varsin käteviksi:
(jQuery UI Dialog, mutta sitä ei tarvita), kaikki on myös testattu.
Käyttäjä ei koskaan poistu samalta sivulta, jolta hän aloitti tiedoston lataamisen. Tästä ominaisuudesta on tulossa ratkaisevan tärkeä nykyaikaisissa web-sovelluksissa
successCallback- ja failCallback-funktiot mahdollistavat sen, että voit kertoa selkeästi, mitä käyttäjä näkee kummassakin tilanteessa.
Yhdessä jQuery UI:n kanssa kehittäjä voi helposti näyttää modaalin, joka kertoo käyttäjälle, että tiedoston lataus on käynnissä, poistaa modaalin latauksen alettua tai jopa ilmoittaa käyttäjälle ystävällisesti, että virhe on tapahtunut. Katso tästä esimerkki Demo. Toivottavasti tämä auttaa jotakuta!
Tässä on yksinkertainen käyttötapausdemo, jossa käytetään lisäosaa source lupausten kanssa. Demosivu sisältää myös monia muita, 'parempaa UX' esimerkkejä.
$.fileDownload('some/file.pdf')
.done(function () { alert('File download a success!'); })
.fail(function () { alert('File download failed!'); });
Jos käytät jo jQueryä, voit hyödyntää sitä pienemmän pätkän tuottamiseen. Andrew'n vastauksen jQuery-versio:
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');