Il modo più semplice per aprire una finestra di download senza dover uscire dalla pagina

Qual è il miglior modo cross browser per aprire una finestra di dialogo di download (supponiamo di poter impostare la disposizione del contenuto: allegato nelle intestazioni) senza uscire dalla pagina corrente o aprire popup, che non funziona bene in Internet Explorer (IE ) 6.

Sono passati 7 anni e non so se funziona o meno per IE6, ma questo richiede OpenFileDialog in FF e Chrome.

var file_path = 'host/path/file.ext';
var a = document.createElement('A');
a.href = file_path;
a.download = file_path.substr(file_path.lastIndexOf('/') + 1);
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

Questo javascript è bello perché non apre una nuova finestra o scheda.

window.location.assign(url);

Aggiungo sempre un target = "_ blank" al link per il download. Si aprirà una nuova finestra, ma non appena l'utente fa clic su Salva, la nuova finestra viene chiusa.

Inseriscilo nella sezione HTML head, impostando la urlvar all'URL del file da scaricare:

<script type="text/javascript">  
function startDownload()  
{  
     var url='http://server/folder/file.ext';    
     window.open(url, 'Download');  
}  
</script>

Quindi inseriscilo nel body, che avvierà automaticamente il download dopo 5 secondi:

<script type="text/javascript">  
setTimeout('startDownload()', 5000); //starts download after 5 seconds  
</script> 

(Da qui .)

So che la domanda è stata posta 7 years and 9 months agoma molte soluzioni pubblicate non sembrano funzionare, ad esempio l'utilizzo di un <iframe>funziona solo con FireFoxe non funziona con Chrome.

Soluzione migliore:

La migliore soluzione di lavoro per aprire un pop-up di download di file JavaScriptè utilizzare un HTMLelemento di collegamento, senza la necessità di aggiungere l'elemento di collegamento adocument.body come indicato in altre risposte.

È possibile utilizzare la seguente funzione:

function downloadFile(filePath){
    var link=document.createElement('a');
    link.href = filePath;
    link.download = filePath.substr(filePath.lastIndexOf('/') + 1);
    link.click();
}

Nella mia applicazione, lo sto usando in questo modo:

downloadFile('report/xls/myCustomReport.xlsx');

Demo funzionante:

function downloadFile(filePath) {
  var link = document.createElement('a');
  link.href = filePath;
  link.download = filePath.substr(filePath.lastIndexOf('/') + 1);
  link.click();
}

downloadFile("http://www.adobe.com/content/dam/Adobe/en/accessibility/pdfs/accessing-pdf-sr.pdf");

Nota:

• Devi usare l' link.downloadattributo in modo che il browser non apra il file in una nuova scheda e attivi il popup di download.
• Questo è stato testato con diversi tipi di file (docx, xlsx, png, pdf, ...).

Ho cercato un buon modo per utilizzare javascript per avviare il download di un file, proprio come suggerisce questa domanda. Tuttavia queste risposte non sono state utili. Ho quindi eseguito alcuni test su xbrowser e ho scoperto che un iframe funziona meglio su tutti i browser moderni IE> 8.

downloadUrl = "http://example.com/download/file.zip";
var downloadFrame = document.createElement("iframe"); 
downloadFrame.setAttribute('src',downloadUrl);
downloadFrame.setAttribute('class',"screenReaderText"); 
document.body.appendChild(downloadFrame); 

class="screenReaderText" è la mia classe per definire lo stile dei contenuti presenti ma non visualizzabili.

css:

.screenReaderText { 
  border: 0; 
  clip: rect(0 0 0 0); 
  height: 1px; 
  margin: -1px; 
  overflow: hidden; 
  padding: 0; 
  position: absolute; 
  width: 1px; 
}

uguale a .visuallyHidden in html5boilerplate

Lo preferisco al metodo window.open di javascript perché se il collegamento è interrotto il metodo iframe semplicemente non fa nulla invece di reindirizzare a una pagina vuota dicendo che il file non può essere aperto.

window.open(downloadUrl, 'download_window', 'toolbar=0,location=no,directories=0,status=0,scrollbars=0,resizeable=0,width=1,height=1,top=0,left=0');
window.focus();

Utilizzo dell'API file URL oggetto Blob HTML5 :

/**
 * Save a text as file using HTML <a> temporary element and Blob
 * @see /programming/49988202/macos-webview-download-a-html5-blob-file
 * @param fileName String
 * @param fileContents String JSON String
 * @author Loreto Parisi
*/
var saveBlobAsFile = function(fileName,fileContents) {
    if(typeof(Blob)!='undefined') { // using Blob
        var textFileAsBlob = new Blob([fileContents], { type: 'text/plain' });
        var downloadLink = document.createElement("a");
        downloadLink.download = fileName;
        if (window.webkitURL != null) {
            downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
        }
        else {
            downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
            downloadLink.onclick = document.body.removeChild(event.target);
            downloadLink.style.display = "none";
            document.body.appendChild(downloadLink);
        }
        downloadLink.click();
    } else {
        var pp = document.createElement('a');
        pp.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileContents));
        pp.setAttribute('download', fileName);
        pp.onclick = document.body.removeChild(event.target);
        pp.click();
    }
}//saveBlobAsFile

/**
 * Save a text as file using HTML <a> temporary element and Blob
 * @see /programming/49988202/macos-webview-download-a-html5-blob-file
 * @param fileName String
 * @param fileContents String JSON String
 * @author Loreto Parisi
 */
var saveBlobAsFile = function(fileName, fileContents) {
  if (typeof(Blob) != 'undefined') { // using Blob
    var textFileAsBlob = new Blob([fileContents], {
      type: 'text/plain'
    });
    var downloadLink = document.createElement("a");
    downloadLink.download = fileName;
    if (window.webkitURL != null) {
      downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
    } else {
      downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
      downloadLink.onclick = document.body.removeChild(event.target);
      downloadLink.style.display = "none";
      document.body.appendChild(downloadLink);
    }
    downloadLink.click();
  } else {
    var pp = document.createElement('a');
    pp.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileContents));
    pp.setAttribute('download', fileName);
    pp.onclick = document.body.removeChild(event.target);
    pp.click();
  }
} //saveBlobAsFile

var jsonObject = {
  "name": "John",
  "age": 31,
  "city": "New York"
};
var fileContents = JSON.stringify(jsonObject, null, 2);
var fileName = "data.json";

saveBlobAsFile(fileName, fileContents)

La modifica della posizione della finestra potrebbe causare qualche problema soprattutto quando si dispone di una connessione persistente come websocket. Quindi ricorro sempre alla buona vecchia soluzione iframe.

HTML

<input type="button" onclick="downloadButtonClicked()" value="Download"/>
...
...
...
<iframe style="display:none;" name="hiddenIframe" id="hiddenIframe"></iframe>

Javascript

function downloadButtonClicked() {
    // Simulate a link click
    var url = 'your_download_url_here';
    var elem = document.createElement('a');
    elem.href = url;
    elem.target = 'hiddenIframe';
    elem.click();
}

Se il collegamento è a un URL di file valido, funzionerà semplicemente assegnando window.location.href.

Tuttavia, a volte il collegamento non è valido ed è necessario un iFrame.

Esegui il normale event.preventDefault per impedire l'apertura della finestra e, se stai usando jQuery, funzionerà:

$('<iframe>').attr('src', downloadThing.attr('href')).appendTo('body').on("load", function() {
   $(this).remove();
});

Dopo ore di tentativi, è nata la funzione :) Avevo uno scenario in cui dovevo visualizzare il caricatore in tempo mentre il file si preparava per il download:

Lavorare in Chrome, Safari e Firefox

function ajaxDownload(url, filename = 'file', method = 'get', data = {}, callbackSuccess = () => {}, callbackFail = () => {}) {
    $.ajax({
        url: url,
        method: 'GET',
        xhrFields: {
            responseType: 'blob'
        },
        success: function (data) {
            // create link element
            let a = document.createElement('a'), 
                url = window.URL.createObjectURL(data);

            // initialize 
            a.href = url;
            a.download = filename;

            // append element to the body, 
            // a must, due to Firefox
            document.body.appendChild(a);

            // trigger download
            a.click();

            // delay a bit deletion of the element
            setTimeout(function(){
                window.URL.revokeObjectURL(url);
                document.body.removeChild(a);
            }, 100);

            // invoke callback if any 
            callbackSuccess(data);
        },
        error: function (err) {
            // invoke fail callback if any
            callbackFail(err)
        }
    });

Che ne dite di:

<meta http-equiv="refresh" content="5;url=http://site.com/file.ext">

In questo modo funziona su tutti i browser (credo) e ti consente di inserire un messaggio del tipo: "Se il download non inizia entro cinque secondi, fai clic qui".

Se hai bisogno che sia con javascript .. beh ...

document.write('<meta http-equiv="refresh" content="5;url=http://site.com/file.ext">');

Saluti

Un iframe piccolo / nascosto può funzionare a questo scopo.

In questo modo non devi preoccuparti di chiudere il popup.