jquery - Descargue un archivo y redirigirlo a otra página a través de ajax
codeigniter wiki (12)
Tengo un formulario de contacto simple para descargar el archivo Excel. El problema principal ocurre, cuando se carga ajax. Deseo descargar el archivo Excel y luego redireccionar al usuario a la siguiente página. A continuación se muestra mi código con datos ficticios.
Código Ajax ...
$.ajax({
type: "POST",
url: "/site/ajaxexcel.php",
data: {''value'':''send''},
cache: false,
success: function(html){
location.href = ''<?php echo base_url()."/site/welcome.php" ?>'';
}
});
Y mi código ajaxexcel.php es:
<?php
$content= ''<html xmlns:x="urn:schemas-microsoft-com:office:excel">
<head>
<!--[if gte mso 9]>
<xml>
<x:ExcelWorkbook>
<x:ExcelWorksheets>
<x:ExcelWorksheet>
<x:Name>Sheet 1</x:Name>
<x:WorksheetOptions>
<x:Print>
<x:ValidPrinterInfo/>
</x:Print>
</x:WorksheetOptions>
</x:ExcelWorksheet>
</x:ExcelWorksheets>
</x:ExcelWorkbook>
</xml>
<![endif]-->
</head>
<body><table class="table table-condensed table-striped table-hover table-bordered pull-left" id="myTable"><thead><tr><th>Rakesh</th><th>kumar</th></tr></thead><tbody><tr><th>Rakesh</th><th>Rakesh</th></tr><tr><th>Rakesh</th><th>Rakesh</th></tr><tr><th>Rakesh</th><th>Rakesh</th></tr><tr><th>Rakesh</th><th>Rakesh</th></tr></tbody></table></body></html>'';
header(''Content-type: application/excel'');
header(''Content-type: image/jpeg,image/gif,image/png'');
header("Content-Disposition: attachment; filename=download.xls");
header("Pragma: ");
header("Cache-Control: ");
echo $content;
?>
Solo quiero descargar el archivo de Excel y luego redirigir al usuario a una ubicación específica.
También puede ayudarme con su código codeigniter si lo ha hecho correctamente.
1) Ajax no es una solución.
2) window.open() emergente window.open() se bloqueará en la mayoría de los navegadores, incluso desde el mismo dominio (al menos eso estaba sucediendo en Chrome y FF hace algún tiempo, cuando traté de implementar algo similar)
Algo así haría el trabajo: (No verifica cosas como el código devuelto, por lo que la salida 404 o sin archivos provocará una redirección sin descargar)
document.getElementById(''zzz'').onclick = function() {
ifrm = document.createElement(''iframe'');
ifrm.style.display = "none";
ifrm.src = "https://github.com/SheetJS/test_files/blob/b07031a7bd5a8b86b9baac94267f20cf81c6d5eb/A4X_2013.xls?raw=true";
// some random xls file from github (it contains just a single "x" character in cell A-4)
ifrm.onload = function() {
window.location.href = "https://jquery.com";
};
document.body.appendChild(ifrm);
return false;
}
<a href="#" id="zzz">
click me
</a>
PD: querrá la application/octet-stream encabezado de Content-type para algunos tipos de archivos (como pdf) para obligar al navegador a descargar archivos en lugar de utilizar los visores integrados.
Al usar https://github.com/johnculviner/jquery.fileDownload
También desde su archivo PHP (excel.php) elimine esta línea. De lo contrario, descargará su archivo como JPG o PNG
encabezado (''Content-type: image / jpeg, image / gif, image / png'');
Al usar https://github.com/johnculviner/jquery.fileDownload js:
$.ajax({
type: "POST",
url: "/site/ajaxexcel.php",
data: {''value'':''send''},
cache: false,
success: function(html)
{
$.fileDownload("ajaxheader.php",
{
successCallback: function (url) {
location.href = ''<?php echo base_url()."/site/welcome.php" ?>'';
},
failCallback: function (responseHtml, url) {
alert(''error'');
}
});
}
});
Y en php side, agrega la siguiente línea en los encabezados:
header("Set-Cookie: fileDownload=true; path=/");
Creo que es muy difícil de descargar. Utilice PHP Excel para crear archivos y descargar.
En Ajax .... Simplemente puedes crear un archivo de Excel en el servidor ... la respuesta de ajax será la ruta del archivo de Excel ... En el éxito de Ajax, abre el archivo de Excel en una pestaña nueva (descarga Excel automáticamente) y al mismo tiempo abre una nueva pestaña con una nueva ubicación.
código de muestra dentro del éxito de ajax dado a continuación
window.open("path to excel..");
window.open("new location");
también puede usar (si es necesario)
window.location.replace("new location");
Abre múltiples enlaces en Chrome a la vez como nuevas pestañas
En realidad, para esta situación, recomiendo abrir la ubicación del archivo con la opción en blanco y redirigir. Para este propósito, necesita crear una estructura de formulario y enviarla a action.php
Ejemplo:
var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "action.php");
form.setAttribute("target", "myView");
// or you can use _blank : form.setAttribute("target", "_blank");
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", "message");
hiddenField.setAttribute("value", "val");
form.appendChild(hiddenField);
document.body.appendChild(form);
window.open('''', ''myView'');
form.submit();
alert("Redirect in 10 second!");
setTimeout(function(){
location.href = "/home"
}, 10000);
No puede descargar el archivo utilizando la solicitud de Ajax. De todos modos, debe redireccionar a una ubicación particular que le permitirá descargar el archivo. Podría intentarlo con esto, pero intente descargar el archivo en una pestaña separada y redirija su página a una página en particular.
<input id="btnGetResponse" type="button" value="Redirect" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnGetResponse").click(function () {
window.open(''/test/excel.php'');
window.location = "http://.com/";
});
});
</script>
También desde su archivo PHP (excel.php) elimine esta línea. De lo contrario, descargará su archivo como JPG o PNG
header(''Content-type: image/jpeg,image/gif,image/png'');
Pruebe el siguiente método, espero que funcione
- abra
ajaxexcel.phpen una nueva ventana a través dewindow.open - comenzará la descarga, luego ciérrelo.
- Tan pronto como se cierre, redirija la página.
Puede lograrlo creando una forma virtual y publicándola.
function autoGenerateAndSubmitForm(method, url, post_data) {
var element = document.getElementById("virtual_form");
if(element != null )
{
element.parentNode.removeChild(element);
}
var form = document.createElement("form");
form.setAttribute("id", "virtual_form");
form.setAttribute("style", "display:none;");
form.setAttribute("target", "_blank"); // This line is very important in your case for redirect in other page and download your file.
form.method = method;
form.action = url;
for(i in post_data)
{
var element=document.createElement("input");
element.value=post_data[i];
element.name=i;
form.appendChild(element);
}
document.body.appendChild(form);
form.submit();
form.parentNode.removeChild(form);
}
Llama al método anterior donde lo necesites, supongo que lo has llamado en evento de clic
$(''button'').on(''click'', function(e){
autoGenerateAndSubmitForm("POST","/site/ajaxexcel.php",{''value'':''send''});
location.href = ''<?php echo base_url()."/site/welcome.php" ?>'';
});
Quite la línea inferior de su código del lado del servidor.
header(''Content-type: image/jpeg,image/gif,image/png'');
Solo uso con javascript simple
window.location.replace(###file url###);
puedes usar jquery.fileDownload.js para esto. puedes encontrar un ejemplo aquí. . . http://www.codeasearch.com/working-with-jquery-filedownload-js-plugin.html
Método 1 : con jQuery AJAX
Reemplaza tu ajax con el siguiente código ...
<script>
$.ajax({
type: "POST",
url: "/site/ajaxexcel.php",
data: {''value'':''send''},
cache: false,
success: function(html)
{
window.open("/site/ajaxexcel.php");
location.href = ''<?php echo base_url()."/site/welcome.php" ?>'';
}
});
</script>
window.open abrirá el archivo ajaxexcel.php en una ventana separada y location.href se redireccionará al archivo welcome.php dado. Este es el mejor método para esto.
Método 2 : con el complemento de descarga de archivos jQuery
Simplemente incluya el script jqueryfiledownload y haga algo como esto:
<a class="download" href="/path/to/file">Download</a>
<script>
$(document).on("click", "a.download", function () {
$.fileDownload($(this).prop(''href''))
.done(function () { alert(''File download a success!''); //success code})
.fail(function () { alert(''File download failed!'');//failure code });
return false; //this is critical to stop the click event which will trigger a normal file download
});
</script>
Ahora cuando haces clic en el ancla, tu archivo se descarga y puedes escribir tu código de éxito / falla en las funciones de done()/fail() , respectivamente.