html读取csv并且展示
时间: 2023-04-10 08:05:04 浏览: 233
可以使用JavaScript将CSV文件读取为数组,然后使用HTML表格将其展示出来。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>CSV展示</title>
<meta charset="utf-8">
<script>
function readCSV(file) {
var reader = new FileReader();
reader.onload = function(event) {
var csv = event.target.result;
var lines = csv.split('\n');
var table = document.createElement('table');
for (var i = 0; i < lines.length; i++) {
var cells = lines[i].split(',');
var row = document.createElement('tr');
for (var j = 0; j < cells.length; j++) {
var cell = document.createElement('td');
cell.textContent = cells[j];
row.appendChild(cell);
}
table.appendChild(row);
}
document.body.appendChild(table);
};
reader.readAsText(file);
}
</script>
</head>
<body>
<input type="file" onchange="readCSV(this.files[0])">
</body>
</html>
```
这个代码使用了JavaScript的FileReader API,可以将用户选择的CSV文件读取为文本。然后,它将文本按行分割,并将每行按逗号分割为单元格。最后,它使用HTML表格将单元格展示出来。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![gz](https://img-home.csdnimg.cn/images/20210720083447.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)