[英]How can I export data from a csv file or excel file to a javascript object?
I would like to know if there is a way to export data from a CSV file to a javascript object and when someone edits the CSV file it automatically changes in the javascript file. I would like to know if there is a way to export data from a CSV file to a javascript object and when someone edits the CSV file it automatically changes in the javascript file. Thank you so much.
太感谢了。
The following steps are implemented in the below code snippet.Customize this as required.以下步骤在下面的代码片段中实现。根据需要自定义。
var CsvRows; var headers; // This event will be triggered when file is selected // Note: This code is tested for UTF-8 encoded CSV file function handleChange(evt) { var reader = new FileReader(); reader.onload = function() { //reader.result gives the file content document.getElementById('out').innerHTML = reader.result; //parse the result into javascript object var lines = reader.result.split('\r\n'); headers = lines[0].split(','); lines.shift(); CsvRows = lines.map((item) => { var values = item.split(','); var row = {}; headers.map((h, i) => { row[h] = values[i]; }); return row; }); console.log(CsvRows); document.getElementById('result').style.display = 'block' }; //read the selected file reader.readAsBinaryString(evt.files[0]); }; //export the javscript object as csv function exportCSV() { //contruct the csv ad data url let csvContent = "data:text/csv;charset=utf-8," + headers.join(",") + "\r\n"; //contruct the data in csv format var data = CsvRows.map(e => { var line = ''; headers.map((h) => { line += e[h] + ','; }); return line.substr(0, line.length - 1); }).join("\r\n") csvContent += data; //contruct an anchor tag var encodedUri = encodeURI(csvContent); var link = document.createElement("a"); link.setAttribute("href", encodedUri); //provide the export file name link.setAttribute("download", "mydata.csv"); document.body.appendChild(link); // Required for FF //trigger download of CSV link.click(); link.remove(); }
<input type="file" onchange="handleChange(this)" accept=".csv" /> <div id="result" style="display:none;"> <div id="out"></div> <div>See console for Javascript Object.</div> <div>Export the imported file <button onclick="exportCSV()">Export</button></div> </div>
The above code snippet only works for CSV files.上述代码片段仅适用于 CSV 文件。 Custom implementation has to be made for Excel files.
必须对 Excel 文件进行自定义实现。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.