Einfachste Möglichkeit, ein Download-Fenster zu öffnen, ohne von der Seite weg zu navigieren

Was ist der beste browserübergreifende Weg, um einen Download-Dialog zu öffnen (nehmen wir an, wir können die Inhaltsdisposition festlegen: Anhang in den Kopfzeilen), ohne von der aktuellen Seite weg zu navigieren oder Popups zu öffnen, was in Internet Explorer (IE) nicht gut funktioniert ) 6.

7 Jahre sind vergangen und ich weiß nicht, ob es für IE6 funktioniert oder nicht, aber dies fordert OpenFileDialog in FF und Chrome auf.

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

Dieses Javascript ist schön, dass es kein neues Fenster oder Tab öffnet.

window.location.assign(url);

Ich füge dem Download-Link immer ein target = "_ blank" hinzu. Dadurch wird ein neues Fenster geöffnet. Sobald der Benutzer auf Speichern klickt, wird das neue Fenster geschlossen.

Fügen Sie dies in den HTML-Kopfabschnitt ein und setzen Sie die urlVariable auf die URL der herunterzuladenden Datei:

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

Dann legen Sie dies in den Körper, der den Download nach 5 Sekunden automatisch startet:

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

(Von hier .)

Ich weiß, dass die Frage gestellt wurde, 7 years and 9 months agoaber viele veröffentlichte Lösungen scheinen nicht zu funktionieren, zum Beispiel die Verwendung einer Funktion, <iframe>die nur mit FireFoxfunktioniert und mit der nicht funktioniert Chrome.

Beste Lösung:

Die beste Lösung zum Öffnen eines Popups zum Herunterladen von Dateien JavaScriptist die Verwendung eines HTMLLink-Elements, ohne dass das Link-Element an dasdocument.body in anderen Antworten angegebene Element angehängt werden muss.

Sie können die folgende Funktion verwenden:

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

In meiner Anwendung verwende ich es folgendermaßen:

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

Arbeitsdemo:

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

Hinweis:

• Sie müssen das link.downloadAttribut verwenden, damit der Browser die Datei nicht in einem neuen Tab öffnet und das Download-Popup auslöst.
• Dies wurde mit verschiedenen Dateitypen (docx, xlsx, png, pdf, ...) getestet.

Ich habe nach einer guten Möglichkeit gesucht, mit Javascript den Download einer Datei zu starten, genau wie diese Frage nahelegt. Diese Antworten waren jedoch nicht hilfreich. Ich habe dann einige xbrowser-Tests durchgeführt und festgestellt, dass ein iframe auf allen modernen Browsern IE> 8 am besten funktioniert.

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" ist meine Klasse, um Inhalte zu stylen, die vorhanden, aber nicht sichtbar sind.

CSS:

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

das gleiche wie .visuallyHidden in html5boilerplate

Ich ziehe dies der Javascript-window.open-Methode vor, da die iframe-Methode bei einer Unterbrechung des Links einfach nichts unternimmt, anstatt auf eine leere Seite umzuleiten, die besagt, dass die Datei nicht geöffnet werden konnte.

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

Verwenden der HTML5- Blob- Objekt-URL-Datei-API:

/**
 * 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)

Das Ändern des Speicherorts des Fensters kann zu Problemen führen, insbesondere wenn Sie eine dauerhafte Verbindung wie Websocket haben. Deshalb greife ich immer auf eine gute alte Iframe-Lösung zurück.

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();
}

Wenn der Link zu einer gültigen Datei-URL führt, funktioniert es einfach, window.location.href zuzuweisen.

Manchmal ist der Link jedoch ungültig und ein iFrame ist erforderlich.

Führen Sie Ihr normales event.preventDefault aus, um das Öffnen des Fensters zu verhindern. Wenn Sie jQuery verwenden, funktioniert dies wie folgt:

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

Nach stundenlangem Versuch ist die Funktion geboren :) Ich hatte ein Szenario, in dem ich den Loader rechtzeitig anzeigen musste, während sich die Datei auf den Download vorbereitet:

Arbeiten in Chrome, Safari und 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)
        }
    });

Wie wäre es mit:

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

Diese Methode funktioniert in allen Browsern (glaube ich) und lässt Sie eine Nachricht wie folgt eingeben: "Wenn der Download nicht in fünf Sekunden startet, klicken Sie hier."

Wenn Sie es brauchen, um mit Javascript zu sein .. na ja ...

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

Grüße

Ein kleiner / versteckter Iframe kann für diesen Zweck funktionieren.

Auf diese Weise müssen Sie sich keine Sorgen mehr über das Schließen des Popups machen.