نمایش اطلاعات csv در جاوا اسکریپت

نمایش اطلاعات 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;
}


دموی برنامه


دانلود سورس نمایش اطلاعات csv در Javascript

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید .

contact us

انجام انواع پروژه های وب


( فروشگاهی ، خبری ، رزرواسیون ، وردپرس ، حل مشکلات وردپرسی )

شماره تماس و واتساپ : 09398554859