AJAXリクエストの応答としてcsvファイルをダウンロード

データを収集し、csvファイルをダウンロードするエンドポイント「/ downloadUserAction」があります。私が抱えている課題は、クリック機能のボタンを使用してエンドポイントを呼び出すときにファイルがダウンロードされないことですが、ブラウザでエンドポイントに直接アクセスするときだけダウンロードされます。AJAXリクエストの応答としてcsvファイルをダウンロード

私は研究の結果、AJAXを使ってファイルをダウンロードできないとの結論に達しました。これは理にかなっています。私のボタンをクリックすると、エンドポイントがヒットし、ファイルの内容がネットワークタブに渡されますが、ファイルはクライアントにダウンロードされません。

これは私のエンドポイントを呼び出すために私のページのデータテーブルのボタンプラグイン機能を使用してJavaScript側で行うことだけです。

$(document).ready(function() { 
    var table = $("#userActivity").on('init.dt', function() { 
      }).DataTable({ 
       dom: 'Blfrtip', 
       buttons: [ 
          { 
          extend: 'csvHtml5', 
          text: 'NLP Search Download', 
          action: function (e, dt, node, config) { 
           $.ajax({ 
            url : window.location + "/downloadUserAction?draw=3&search%5Bvalue%5D=NLP_SEARCH&order%5B0%5D%5Bcolumn%5D=6&order%5B0%5D%5Bdir%5D=desc"       
           }); 
          } 
          } 
         ],

クライアントページで強制的にダウンロードするエンドポイントを呼び出す別の方法はありますか？

side-note：私のデータテーブルはサーバーサイドの処理を使用しています。そうでなければ、datatables csv exportingボタンを使用しました。最近のブラウザで

出典

2017-10-09 Daniel Gebrahanus

、あなたは、（アヤックスで受信されたあなたのケースでは）あなたのファイルの内容を持つブロブを作成するそれのためのURLを作成し、download属性を使用して、ダウンロードを促すことができる。

const saveData = (function() { 
    const a = document.createElement("a"); 
    document.body.appendChild(a); 
    a.style = "display: none"; 
    return function (data, fileName) { 
     const blob = new Blob([data], {type: "octet/stream"}), 
      url = window.URL.createObjectURL(blob); 
     a.href = url; 
     a.download = fileName; 
     a.click(); 
     window.URL.revokeObjectURL(url); 
    }; 
}()); 

const data = 'a,b,c\n5,6,7', 
    fileName = "my-csv.csv"; 

saveData(data, fileName);

JSFiddle

AjaxエンドポイントURLに適切なヘッダーがある場合（または、download属性を使用する限り長くない場合でも）、BlobとAjaxを控えて、URLをダウンロードしたリンクに追加するだけです属性。

const saveData = (function() { 
    const a = document.createElement("a"); 
    document.body.appendChild(a); 
    a.style = "display: none"; 
    return function (url, fileName) { 
     a.href = url; 
     a.download = fileName; 
     a.click(); 
    }; 
}()); 

const url = 'http://www.sample-videos.com/csv/Sample-Spreadsheet-10-rows.csv', // Replace with your own URL: window.location + "/downloadUserAction?draw=3&search%5Bvalue%5D=NLP_SEARCH&order%5B0%5D%5Bcolumn%5D=6&order%5B0%5D%5Bdir%5D=desc" 
    fileName = "my-csv.csv"; 

saveData(url, fileName);

あなたはボタン内部のアンカータグを設定してやるとのhref属性を設定することができるものので、ブラウザから直接エンドポイントにアクセスするとき、それがダウンロードされるので

JSFiddle

出典

2017-10-09 03:33:08

、priteshのコード@適応CSV file.Iを指すURLにアンカータグは、ここではサンプルの例を作成しました：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
</head> 
<body> 
    <button> 
     <a href="http://www.sample-videos.com/csv/Sample-Spreadsheet-10-rows.csv">Click me</a> 
    </button> 
</body> 
</html>

ブラウザでこのコードを試してみた場合、onclickのダイアログがファイルを保存するために表示されます。

お客様のケースでは、サンプルビデオURLを自分で置き換える必要があります。

window.locationの+ 「/ downloadUserAction？ドロー= 3 &検索％5Bvalue％5D = NLP_SEARCH &注文％5B0％5D％の5Bcolumn％5D = 6 &注文％5B0％5D％の5Bdir％の5D = DESC "

出典

2017-10-09 03:36:51 pritesh

AJAXリクエストの応答としてcsvファイルをダウンロード

答えて

関連する問題