Sử dụng javascript để tải xuống tệp dưới dạng tệp .csv

Question

Xin chào Tôi đang cố gắng xuất tệp dưới dạng tệp .csv, để khi người dùng nhấp vào nút tải xuống, trình duyệt sẽ tự động tải xuống tệp dưới dạng .csv. Tôi cũng muốn để có thể đặt tên cho tập tin .csv được xuất khẩu

Tôi đang sử dụng javascript để làm

Bộ luật này là dưới đây:

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


     }); 

    }); 

Xin cho biết về này Boss của tôi đang thở xuống cổ của tôi về vấn đề này

Hãy giúp đỡ

Answer 1

trong các trình duyệt hiện đại có một att mới sườn trong neo.

download

http://caniuse.com/download

nên thay vì sử dụng

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

tạo một liên kết tải về:

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

giải pháp khác là sử dụng php

EDIT

tôi không sử dụng jQuery, nhưng bạn cần phải chỉnh sửa mã của bạn để thêm liên kết tải xuống với một cái gì đó như thế trong chức năng của bạn.

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

Tôi đã viết một giải pháp trong luồng này: how to set a file name using window.open

Đây là giải pháp đơn giản:

$("#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); 
}); 

chức năng 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

Tôi chỉ muốn thêm một số mã ở đây cho những người trong tương lai vì tôi đã cố gắng xuất JSON sang tài liệu CSV và downlo quảng cáo nó.

Tôi sử dụng $.getJSON để lấy dữ liệu json từ một trang bên ngoài, nhưng nếu bạn có một mảng cơ bản, bạn chỉ có thể sử dụng nó.

Điều này sử dụng mã Christian Landgren's để tạo dữ liệu 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); 
    }); 
});