نمایش اطلاعات csv در جاوا اسکریپت
نمایش اطلاعات csv در Javascript – در این آموزش قصد داریم که با کمک ajax فایل csv را دانلود کرده و اطلاعات آن
به آرایه تبدیل کرده و در یک جدول نمایش دهیم .
دقت داشته باشید آدرسی که برای دریافت csv وارد می کنید دسترسی Access-Control-Allow-Origin به شما دهد که به خطای CORS یا همان Cross-origin resource sharing مواجه نشوید .
فایل index.php
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>Rapidcode.iR - سورس کد</title>
<link rel="stylesheet" href="static/css/main.css">
</head>
<body>
<div class="container">
<a id="introduce" href="https://rapidcode.ir" target="_blank">رپید کد • کتابخانه مجازی برنامه نویسان</a>
<input type="url" id="url" placeholder="https://example.com/data.csv">
<input type="button" id="show" value="نمایش">
</div>
<script src="static/js/app.js"></script>
</body>
</html>
اسکریپت app.js
const urlDOM = document.getElementById("url");
const showDOM = document.getElementById("show");
showDOM.onclick = function () {
const url = urlDOM.value;
if (url == "") {
alert("هیچ آدرسی وارد نشده است")
return false;
}
// the url most have Access-Control-Allow-Origin:* on server side
getCsvFile(url);
}
function getCsvFile(url) {
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
showDOM.setAttribute("disabled", "disabled");
xhr.onreadystatechange = function (e) {
if (this.status === 200 && this.readyState == this.DONE) {
let csvData = this.response;
csvData = csvParser(csvData);
const html = generateTableByCsv(csvData["keys"], csvData["values"]);
const container = document.getElementsByClassName("container")[0];
container.innerHTML += html;
} else if (this.status < 200 && this.readyState == this.DONE) {
window.alert("خطای شبکه");
console.error("ERR");
}
showDOM.removeAttribute("disabled");
}
xhr.send();
}
function csvParser(csv) {
let csvData = csv.split("\n");
let csvKeys = csvData[0];
csvData.shift();
csvKeys = csvKeys.split(",");
csvKeys = csvKeys.map((val) => val.trim());
csvData = csvData.map(val => val.split(","));
const csvDataFiltered = {
"keys": csvKeys,
"values": csvData
}
return csvDataFiltered;
}
function generateTableByCsv(keys, values) {
let head = "<tr>";
keys.forEach(function (element) {
head += `<th>${element}</th>`;
});
head += "</tr>";
let body = "";
for (const depth1 of values) {
body += "<tr>";
for (const depth2 of depth1) {
body += `<td>${depth2}</td>`;
}
body += "</tr>";
}
let templateHtml = `<table><thead>${head}</thead><tbody>${body}</tbody></table>`;
return templateHtml;
}
فایل main.css
table{
border-collapse: collapse;
}
table tr td , table tr th{
border: 1px solid;
padding: 5px;
}
ارسال نظر