Verwenden von Javascript zum Herunterladen von Datei als CSV-Datei

Question

Hallo Ich versuche, eine Datei als .csv-Datei zu exportieren, so dass, wenn der Benutzer auf den Download-Button klickt, der Browser automatisch die Datei als .csv herunterladen würde. Ich möchte auch in der Lage sein, einen Namen zu setzen für die CSV-Datei

exportiert werden ich Javascript bin mit diesem ist

-Code tun unter:

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


     }); 

    }); 

Bitte geben Sie an dieser Mein Chef atmet meinen Nacken hinunter zu diesem Thema

Bitte helfen

Answer 1

in modernen Browsern gibt es eine neue att Rippen in Ankern.

download

http://caniuse.com/download

so statt

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

mit einem Download-Link erstellen:

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

eine andere Lösung php

0 verwenden,

EDIT

ich benutze jQuery nicht, aber Sie müssen Ihren Code bearbeiten, um den Download-Link mit so etwas in Ihrer Funktion hinzuzufügen.

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

Ich habe eine Lösung in diesem Thread geschrieben: how to set a file name using window.open

Dies ist die einfache Lösung:

$("#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 Funktion

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

Ich wollte nur etwas Code hinzufügen hier für Leute in der Zukunft, seit ich versuchte, JSON in ein CSV-Dokument zu exportieren und downlo ad es.

Ich verwende $.getJSON, um Json-Daten von einer externen Seite zu ziehen, aber wenn Sie ein einfaches Array haben, können Sie das einfach verwenden.

Dies verwendet Christian Landgren's Code, um die CSV-Daten zu erstellen.

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