Display CSV as a table in JavaScript (simple example)

allway2 2022-06-24 07:21:03 阅读数:847


Welcome to read about how to read CSV File and display it in Javascript Medium HTML Tutorials in tables . Need to be CSV Display it as before uploading to the server HTML form ? Or there is one on the server CSV Documents need to be in HTML Show in table ? ok , Use modern Javascript it is possible that —— Please continue to read the examples !

ⓘ At the beginning of this tutorial, I included a that contains all the source code zip file , So you don't have to copy and paste everything …… Or if you just want to go straight into .

Sample code download

Click here to download all sample source code , I am already in MIT Release it under license , So feel free to build on it or use it in your own projects .

CSV To HTML form

well , Now let's see how to read CSV File and display it in Javascript Medium HTML Examples in tables .


0) fictitious CSV

Jo Doe,[email protected],465785 Joa Doe,[email protected],123456 Job Doe,[email protected],234567 Joe Doe,[email protected],345678 Jog Doe,[email protected],578456 Joh Doe,[email protected],378945 Joi Doe,[email protected],456789 Jon Doe,[email protected],987654 Jor Doe,[email protected],754642 Joy Doe,[email protected],124578

First , Let's start from the virtual CSV File start . I don't know CSV( Comma separated values ) How people work :

  • CSV A file is essentially a text file .
  • We use line breaks \r\n To indicate the new line .
  • We use commas , To represent a new column .


1) Read from the file selector CSV


<!-- (A) PICK CSV FILE --> <input type="file" accept=".csv" id="demoPick"/> <!-- (B) GENERATE HTML TABLE HERE --> <table id="demoTable"></table>

For the first example , We will start from an Choose one of them CSV<input type="file"> And show it in <table id="demoTable">.




1b- Read -csv.js
// (A) GET HTML FILE PICKER & TABLE let picker = document.getElementById("demoPick"), table = document.getElementById("demoTable"); // (B) ON SELECTING CSV FILE picker.onchange = () => { // (B1) REMOVE OLD TABLE ROWS table.innerHTML = ""; // (B2) READ CSV & GENERATE TABLE let reader = new FileReader(); reader.addEventListener("loadend", () => { let csv = reader.result.split("\r\n"); for (let row of csv) { let tr = table.insertRow(); for (let col of row.split(",")) { let td = tr.insertCell(); td.innerHTML = col; } } }); reader.readAsText(picker.files[0]); };

I'm not going to explain it line by line , But the important part is :

  • reader.readAsText(SELECTED FILE) Will choose CSV The file reads as text .
  • let csv = reader.result.split("\r\n") Remember CSV file \r\n Used to indicate the new line ? We just put the whole “CSV Text ” The block is split into rows .
  • for (let row of csv) { for (let col of row.split(",")) For each line , We further decompose the columns and draw the table rows / Cell .

Yes , you 're right . There is no need to CSV File upload to server , modern Javascript Able to read files .



2) AJAX Get... From the server CSV


<!-- (A) GENERATE HTML TABLE HERE --> <table id="demoTable"></table>

If CSV The file is on the server , We can also use AJAX fetch To generate tables .




// (A) GET HTML TABLE let table = document.getElementById("demoTable"); // (B) AJAX FETCH CSV FILE fetch("0-dummy.csv") .then((res) => { return res.text(); }) .then((csv) => { // (B1) REMOVE OLD TABLE ROWS table.innerHTML = ""; // (B2) GENERATE TABLE csv = csv.split("\r\n"); for (let row of csv) { let tr = table.insertRow(); for (let col of row.split(",")) { let td = tr.insertCell(); td.innerHTML = col; } } });

Yes , This is almost the same as the file selector example . Except for us now fetch(CSV FILE) Used to get data from the server .


Useful information and links

This is the whole content of this tutorial , Here is a small section on some additional content and links that might be useful to you .


Performance issues and limitations

At the time of writing , There seems to be no way to read line by line CSV file . therefore , If you are dealing with a large number of CSV file , Please be careful —— This may lead to “ Out of memory ” Problems and performance problems .


copyright:author[allway2],Please bring the original link to reprint, thank you. https://en.javamana.com/2022/175/202206240117230114.html