6.3 解析 CSV
使用 readAsText 解析 CSV 檔
建立 file/data 資料夾，然後將 sample.csv 檔放進去( 直接下載 )。
然後建立 file/file3_csv.html 檔案，完整原始碼如下，直接複製貼上即可：
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<title></title>
<style>
table{
border: 1px solid black;
border-collapse: collapse;
}
table th, table td{
border: 1px solid black;
}
</style>
</head>
<body>
<input type="file" id="read_text" accept=".csv">
<div id="show_csv_block">
</div>
<!-- 目標：讀取 CSV 檔，顯示表格 -->
<!--
<table>
<tbody>
<tr>
<td>Column1</td>
<td>Column2</td>
<td>Column3</td>
</tr>
<tr>
<td>資料1</td>
<td>資料2</td>
<td>資料3</td>
</tr>
<tr>
<td>資料4</td>
<td>資料5</td>
<td>資料6</td>
</tr>
<tr>
<td>資料7</td>
<td>資料8</td>
<td>資料9</td>
</tr>
</tbody>
</table>
-->
<script>
function createRow(d, td_or_th){ // "Column1,Column2,Column3" "td"
let tr_el = document.createElement("tr"); // 建立 tr 標籤
let tr_data_arr = d.split(","); // ["Column1", "Column2", "Column3"]
tr_data_arr.forEach(function(item, j){
let data_el = document.createElement(td_or_th); // 建立 th 或 td 標籤
data_el.append(item); // <td>Column1</td>
tr_el.append(data_el); // <tr><td>Column1</td></tr>
});
// tr_el: <tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
return tr_el;
}
let file_el = document.getElementById("read_text");
file_el.addEventListener("change", function(){
//console.log(this.files);
let file_reader = new FileReader();
file_reader.readAsText(this.files[0]);
file_reader.addEventListener("load", function(){
//console.log(file_reader.result);
let table_el = document.createElement("table"); // 建立 table 標籤
let tbody_el = document.createElement("tbody"); // 建立 tbody 標籤
table_el.append(tbody_el);
// <table>
// <tbody>
// </tbody>
// </table>
let contents = file_reader.result;
// 例：
// var str = "a,b,c";
// var result = str.split(",")
// result 結果會是 → ["a", "b", "c"]
let contents_arr = contents.split("\r\n");
// ["Column1,Column2,Column3", "資料1,資料2,資料3", "資料4,資料5,資料6", "資料7,資料8,資料9", ""]
contents_arr.forEach(function(row_str, i){
if(row_str != ""){
let tr_el = createRow(row_str, "td");
tbody_el.append(tr_el);
}
});
let show_csv_block_el = document.getElementById("show_csv_block");
show_csv_block_el.append(table_el);
});
});
</script>
</body>
</html>Last updated