javascript - transparente - ventana modal jquery ejemplo

La forma más fácil de abrir una ventana de descarga sin navegar fuera de la página

Question

¿Cuál es la mejor forma de navegador cruzado para abrir un diálogo de descarga (supongamos que podemos establecer el contenido-eliminación: archivo adjunto en los encabezados) sin navegar desde la página actual o abrir ventanas emergentes, lo que no funciona bien en IE6.

Answer 1

7 años han pasado, de acuerdo. No sé si funciona para IE6, 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);

Answer 2

Coloque esto en la sección del encabezado de HTML, estableciendo la url var a 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 coloque esto en el cuerpo, que comenzará la descarga automáticamente después de 5 segundos:

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

(De here )

Answer 3

Este javascript es bueno que no abra una nueva ventana o pestaña.

window.location.assign(url);

Answer 4

He estado buscando una buena forma de usar javascript para iniciar la descarga de un archivo, tal como lo sugiere esta pregunta. Sin embargo, estas respuestas no han sido útiles. Luego hice algunas pruebas 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 el contenido presente pero no visible.

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

Answer 5

La modificación de la ubicación de la ventana puede causar algún problema, especialmente cuando tienes una conexión persistente como websocket. Así que siempre recurro a una buena solución de iframe antiguo.

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

Answer 6

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 enviar un mensaje como: "Si la descarga no comienza en cinco segundos, haz clic aquí".

Si lo necesitas con javascript ... bueno ...

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

Saludos

Answer 7

Sé que la pregunta fue hecha hace 7 years and 9 months ago pero muchas soluciones publicadas no parecen funcionar, por ejemplo, usar un <iframe> funciona solo con FireFox y no funciona con Chrome .

Mejor solución:

La mejor solución de trabajo para abrir una ventana emergente de descarga de archivos en JavaScript es usar un elemento de enlace HTML , sin necesidad de agregar el elemento de enlace a document.body como se indica en otras respuestas.

Puede usar 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:

• link.download usar el atributo link.download 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, ...).

Answer 8

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.

Realice su evento normal.preventDefault para evitar que se abra la ventana, y si está utilizando jQuery, esto funcionará:

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

Answer 9

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

Answer 10

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

De esta forma, no tiene que preocuparse por cerrar la ventana emergente.

Answer 11

Usando HTML5 Blob Object-URL File API:

/**
* Save a text as file using HTML <a> temporary element and Blob
* @see https://.com/questions/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 https://.com/questions/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)