web-dev-qa-db-ja.com

ファイルをダウンロードし、ajax経由で別のページにリダイレクトします

Excelファイルをダウンロードするための簡単な連絡フォームがあります。主な問題が発生します。ajaxが読み込まれると、Excelファイルをダウンロードして、ユーザーを次のページにリダイレクトします。以下は、ダミーデータを含むコードです。

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" ?>';                 
    }
});

と私 ajaxexcel.phpコードは次のとおりです。

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

Excelファイルをダウンロードして、ユーザーを特定の場所にリダイレクトしたいだけです。

また、適切に実行した場合は、codeigniterコードを手伝ってください。

jqueryajaxcodeigniterwiki
26
Kumar Rakesh

以下の方法を試してください、それがうまくいくことを願っています

  1. 開いた ajaxexcel.php新しいウィンドウでwindow.open
  2. ダウンロードを開始してから閉じます。
  3. 閉じたらすぐにページをリダイレクトします。
5
shyammakwana.me

Ajaxリクエストを使用してファイルをダウンロードすることはできません。ファイルをダウンロードできるようにする特定の場所にリダイレクトする必要がある方法。これを試してみたかもしれませんが、別のタブでファイルをダウンロードして、ページを特定のページにリダイレクトしてみてください。

<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://stackoverflow.com/";
    });
});
</script>

また、PHPファイル（Excel.php）からこの行を削除します。そうしないと、ファイルがJPGまたはPNGとしてダウンロードされます。

header('Content-type: image/jpeg,image/gif,image/png');
4
Milan Malani

ダウンロードするのはとても難しいと思います。 PHP Excelを使用してファイルを作成してダウンロードしてください。

4
Vijju Pundir

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

そしてphp側でヘッダーに以下の行を追加します：

header("Set-Cookie: fileDownload=true; path=/");
4
Ish

これにはjquery.fileDownload.jsを使用できます。ここに例があります。 。 。 http://www.codeasearch.com/working-with-jquery-filedownload-js-plugin.html

2
Ravikiran kalal

https://github.com/johnculviner/jquery.fileDownload を使用する

また、PHPファイル（Excel.php）からこの行を削除します。そうしないと、ファイルがJPGまたはPNGとしてダウンロードされます。

header（ 'Content-type：image/jpeg、image/gif、image/png'）;

2
Vaibhav Walke

これは、仮想フォームを作成して投稿することで実現できます。

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

必要な場所で上記のメソッドを呼び出します。クリックイベントで呼び出したと思います。

$('button').on('click', function(e){
     autoGenerateAndSubmitForm("POST","/site/ajaxexcel.php",{'value':'send'});
     location.href = '<?php echo base_url()."/site/welcome.php" ?>';     
});

サーバー側のコードから以下の行を削除します。

header('Content-type: image/jpeg,image/gif,image/png');
2
Haresh Vidja

Ajaxでは....サーバー上にExcelファイルを作成できます... ajax応答はExcelファイルのパスになります... ajaxが成功すると、Excelファイルを新しいタブで開き（自動的にExcelをダウンロードします）、同時に、新しい場所で新しいタブを開きます。

以下に示すajax成功内のサンプルコード

  window.open("path to Excel..");
    window.open("new location");

使用することもできます（必要な場合）

window.location.replace("new location");

Chrome新しいタブとして一度に複数のリンクを開く

2
safin chacko

実際、この状況では、空白のオプションとリダイレクトを使用してファイルの場所を開くことをお勧めします。この目的のために、フォーム構造を作成し、それをaction.phpに送信する必要があります

例：

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

メソッド1：jQueryAJAXを使用

Ajaxを次のコードに置き換えます。

_<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_はajaxexcel.phpファイルを別のウィンドウで開き、_location.href_は指定されたwelcome.phpファイルにリダイレクトします。これがこれに最適な方法です。

方法2：jQueryファイルダウンロードプラグインを使用

jqueryfiledownload script を含めて、次のようにします。

_<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>
_

これで、アンカーをクリックするとファイルがダウンロードされ、成功/失敗のコードをそれぞれdone()/fail()関数に書き込むことができます。

2
Manjeet Barnala

1）Ajaxは解決策ではありません。

2）window.open()ポップアップは、同じドメインからでもほとんどのブラウザでブロックされます（少なくとも、以前にchromeとFFで、同様の何かを実装しようとしたときに発生していました） ）

このようなものが仕事をします:(返されたコードのようなものをチェックしないので、404またはファイル以外の出力はダウンロードせずにリダイレクトを引き起こします）

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>

追伸：一部のファイルタイプ（pdfなど）のapplication/octet-streamContent-typeヘッダーで、組み込みのビューアを使用する代わりに、ブラウザにファイルのダウンロードを強制する必要があります。

1
haldagan

単純なJavaScriptで使用するだけです

window.location.replace(###file url###);
1
Antonio Stipić