使用javascript下載文件作爲a.csv文件

Question

嗨我想導出一個文件爲.csv文件，以便當用戶點擊下載按鈕時，瀏覽器會自動下載文件爲.csv。 我也希望能夠設置一個名稱爲.csv文件導出

我使用JavaScript來做到這一點

代碼如下：

function ConvertToCSV(objArray) { 
      var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray; 
      var str = ''; 

      for (var i = 0; i < array.length; i++) { 
       var line = ''; 
      for (var index in array[i]) { 
       if (line != '') line += ',' 

       line += array[i][index]; 
      } 

      str += line + '\r\n'; 
     } 

     return str; 
    } 

    // Example 
    $(document).ready(function() { 

     // Create Object 
     var items = [ 
       { "name": "Item 1", "color": "Green", "size": "X-Large" }, 
       { "name": "Item 2", "color": "Green", "size": "X-Large" }, 
       { "name": "Item 3", "color": "Green", "size": "X-Large" }]; 

     // Convert Object to JSON 
     var jsonObject = JSON.stringify(items); 

     // Display JSON 
     $('#json').text(jsonObject); 

     // Convert JSON to CSV & Display CSV 
     $('#csv').text(ConvertToCSV(jsonObject)); 

     $("#download").click(function() { 
      alert("2"); 
      var csv = ConvertToCSV(jsonObject); 
      window.open("data:text/csv;charset=utf-8," + escape(csv)) 
      /////// 


     }); 

    }); 

請在這個 建議我的老闆是呼吸了我的脖子，在這個問題上

請幫

Answer 1

在現代瀏覽器

有一個新的ATT肋骨在船錨。的

download

http://caniuse.com/download

因此而不是使用

window.open("data:text/csv;charset=utf-8," + escape(csv)) 

創建一個下載鏈接：

<a href="data:text/csv;charset=utf-8,'+escape(csv)+'" download="filename.csv">download</a> 

另一種解決方案是用PHP

編輯

我不使用jQuery，但是你需要編輯的代碼與類似的東西在你的函數添加下載鏈接 。

var csv=ConvertToCSV(jsonObject), 
a=document.createElement('a'); 
a.textContent='download'; 
a.download="myFileName.csv"; 
a.href='data:text/csv;charset=utf-8,'+escape(csv); 
document.body.appendChild(a); 

Answer 2

我已經寫在這個線程的解決方案：how to set a file name using window.open

這是簡單的解決辦法：

$("#download_1").click(function() { 
var json_pre = '[{"Id":1,"UserName":"Sam Smith"},{"Id":2,"UserName":"Fred Frankly"},{"Id":1,"UserName":"Zachary Zupers"}]'; 
var json = $.parseJSON(json_pre); 

var csv = JSON2CSV(json); 
var downloadLink = document.createElement("a"); 
var blob = new Blob(["\ufeff", csv]); 
var url = URL.createObjectURL(blob); 
downloadLink.href = url; 
downloadLink.download = "data.csv"; 

document.body.appendChild(downloadLink); 
downloadLink.click(); 
document.body.removeChild(downloadLink); 
}); 

JSON2CSV功能

function JSON2CSV(objArray) { 
    var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray; 
    var str = ''; 
    var line = ''; 

    if ($("#labels").is(':checked')) { 
     var head = array[0]; 
     if ($("#quote").is(':checked')) { 
      for (var index in array[0]) { 
       var value = index + ""; 
       line += '"' + value.replace(/"/g, '""') + '",'; 
      } 
     } else { 
      for (var index in array[0]) { 
       line += index + ','; 
      } 
     } 

     line = line.slice(0, -1); 
     str += line + '\r\n'; 
    } 

    for (var i = 0; i < array.length; i++) { 
     var line = ''; 

     if ($("#quote").is(':checked')) { 
      for (var index in array[i]) { 
       var value = array[i][index] + ""; 
       line += '"' + value.replace(/"/g, '""') + '",'; 
      } 
     } else { 
      for (var index in array[i]) { 
       line += array[i][index] + ','; 
      } 
     } 

     line = line.slice(0, -1); 
     str += line + '\r\n'; 
    } 
    return str; 
} 

Answer 3

我只是想添加一些代碼在這裏面向未來的人們，因爲我試圖將JSON導出爲CSV文檔並下載廣告。

我使用$.getJSON從外部頁面提取json數據，但是如果您有基本數組，您可以使用它。

這使用Christian Landgren's代碼來創建csv數據。

$(document).ready(function() { 
    var JSONData = $.getJSON("GetJsonData.php", function(data) { 
     var items = data; 
     const replacer = (key, value) => value === null ? '' : value; // specify how you want to handle null values here 
     const header = Object.keys(items[0]); 
     let csv = items.map(row => header.map(fieldName => JSON.stringify(row[fieldName], replacer)).join(',')); 
     csv.unshift(header.join(',')); 
     csv = csv.join('\r\n'); 

     //Download the file as CSV 
     var downloadLink = document.createElement("a"); 
     var blob = new Blob(["\ufeff", csv]); 
     var url = URL.createObjectURL(blob); 
     downloadLink.href = url; 
     downloadLink.download = "DataDump.csv"; //Name the file here 
     document.body.appendChild(downloadLink); 
     downloadLink.click(); 
     document.body.removeChild(downloadLink); 
    }); 
});