下載csv文件作爲對AJAX請求的響應

我有一個名爲'/ downloadUserAction'的端點，用於收集數據並下載csv文件。我遇到的挑戰是，當使用點擊功能上的按鈕調用端點時，文件不會被下載，但只有當我直接在瀏覽器中訪問端點時纔會下載文件。下載csv文件作爲對AJAX請求的響應

經研究，我發現了一些發現，結論是你不能使用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按鈕。

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：

來源

2017-10-09 Daniel Gebrahanus

在現代瀏覽器中，你可以通過你的文件內容創建的Blob（在阿賈克斯收到你的情況下），因爲它創建一個URL，並使用download屬性提示下載

如果您的Ajax端點URL具有正確的標頭（或者可能即使不是您使用download屬性的時間），您也可以放棄Blob和Ajax，並將該URL添加到下載的鏈接中屬性。適應@ pritesh的代碼，

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

JSFiddle

來源

2017-10-09 03:33:08

因爲當你從瀏覽器直接訪問端點，所以你可以做的是設置按鈕內的錨標記和設置的href屬性它會下載錨標記指向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將出現一個對話框用於保存文件。

在你的情況下，你需要用你自己的替換示例視頻網址。

window.location的+ 「/ downloadUserAction？繪製= 3 &搜索％5Bvalue％5D = NLP_SEARCH &順序％5B0％5D％5Bcolumn％5D = 6 &順序％5B0％5D％5Bdir％5D =降序「

來源

2017-10-09 03:36:51 pritesh

下載csv文件作爲對AJAX請求的響應

回答

相關問題