La forma más sencilla de abrir una ventana de descarga sin salir de la página

¿Cuál es la mejor forma de varios navegadores para abrir un cuadro de diálogo de descarga (supongamos que podemos configurar la disposición de contenido: adjunto en los encabezados) sin navegar fuera de la página actual o abrir ventanas emergentes, lo cual no funciona bien en Internet Explorer (IE ) 6.

Han pasado 7 años y no sé si funciona para IE6 o no, pero esto abre OpenFileDialog en FF y 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);

Este javascript es bueno porque no abre una nueva ventana o pestaña.

window.location.assign(url);

Siempre agrego un target = "_ blank" al enlace de descarga. Esto abrirá una nueva ventana, pero tan pronto como el usuario haga clic en Guardar, la nueva ventana se cerrará.

Coloque esto en la sección de encabezado HTML, estableciendo la urlvar en la URL del archivo que se descargará:

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

Luego ponga esto en el cuerpo, que iniciará la descarga automáticamente después de 5 segundos:

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

(Desde aquí .)

Sé que se hizo la pregunta, 7 years and 9 months agopero muchas soluciones publicadas no parecen funcionar, por ejemplo, usar un <iframe>solo funciona con FireFoxy no funciona con Chrome.

Mejor solución:

La mejor solución de trabajo para abrir una ventana emergente de descarga de archivos JavaScriptes usar un HTMLelemento de enlace, sin necesidad de agregar el elemento de enlacedocument.body como se indica en otras respuestas.

Puede utilizar la siguiente función:

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

En mi aplicación, lo estoy usando de esta manera:

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

Demo de trabajo:

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:

• Debe usar el link.downloadatributo para que el navegador no abra el archivo en una nueva pestaña y active la ventana emergente de descarga.
• Esto se probó con varios tipos de archivos (docx, xlsx, png, pdf, ...).

He estado buscando una buena forma de usar javascript para iniciar la descarga de un archivo, tal como sugiere esta pregunta. Sin embargo, estas respuestas no han sido útiles. Luego hice algunas pruebas de xbrowser y descubrí que un iframe funciona mejor en todos los navegadores modernos 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" es mi clase para diseñar contenido que está presente pero no se puede ver.

css:

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

igual que .visuallyHidden en html5boilerplate

Prefiero esto al método javascript window.open porque si el enlace está roto, el método iframe simplemente no hace nada en lugar de redirigir a una página en blanco que dice que el archivo no se pudo abrir.

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

Uso de la API de archivo de URL de objeto de 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 modificación de la ubicación de la ventana puede causar algún problema, especialmente cuando tiene una conexión persistente como websocket. Así que siempre recurro a la vieja solución de 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();
}

Si el enlace es a una URL de archivo válida, simplemente la asignación de window.location.href funcionará.

Sin embargo, a veces el enlace no es válido y se requiere un iFrame.

Haz tu event.preventDefault normal para evitar que la ventana se abra, y si estás usando jQuery, esto funcionará:

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

Después de horas de intentarlo, nació la función :) Tuve un escenario en el que tenía que mostrar el cargador a tiempo mientras el archivo se preparaba para descargar:

Trabajando en Chrome, Safari y 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)
        }
    });

Qué tal si:

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

De esta manera funciona en todos los navegadores (creo) y te permite poner un mensaje como: "Si la descarga no comienza en cinco segundos, haz clic aquí".

Si necesita que sea con javascript .. bueno ...

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

Saludos

Un iframe pequeño / oculto puede funcionar para este propósito.

De esa manera, no tendrá que preocuparse por cerrar la ventana emergente.