从某个位置读取 csv 文件并显示为 html 表答案

【问题标题】：read csv file from a location and display as html table从某个位置读取 csv 文件并显示为 html 表
【发布时间】：2016-07-06 08:54:22
【问题描述】：

有没有办法让 HTML 页面从特定目标读取 csv 文件并将其显示为网页中的 HTML 表格？

我正在开发一个网页来显示登录用户的状态。因此 HTML 页面必须自动读取 csv 文件并相应地显示在网页中，因为 csv 文件会定期更新。

编辑：

根据答案中的建议添加了代码，但浏览器中没有弹出任何内容

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSV Downloader</title>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script>
<script>
    function arrayToTable(tableData) {
        var table = $('<table></table>');
        $(tableData).each(function (i, rowData) {
            var row = $('<tr></tr>');
            $(rowData).each(function (j, cellData) {
                row.append($('<td>'+cellData+'</td>'));
            });
            table.append(row);
        });
        return table;
    }

    $.ajax({
        type: "GET",
        url: "C:\Users\tim tom\Desktop\csvTOhtml\data.csv",
        success: function (data) {
            $('body').append(arrayToTable(Papa.parse(data).data));
        }
    });
</script>
</body>

【问题讨论】：

查看 Papa Parse 网站以获取 csv 解析器。我与他们没有任何关系。
我的回答解决了你的问题吗？
这个问题在以下方面过于宽泛：要求我们推荐或找到一些东西的问题......

标签： javascript html json csv html-table

【解决方案1】：

三步流程

您需要三个步骤：

1) 使用Ajax 从您的服务器获取数据并将其转换为数组。你可以这样做，例如。使用以下 jQuery ：

$.ajax({
    type: "GET",
    url: "data.csv",
    success: CSVToHTMLTable
});

2) 获得 CSV 文件后，您需要对其进行解析。一种简单可靠的方法是使用像 Papa Parse 这样的库：

var data = Papa.parse(data).data;

3) 您需要定义一个函数来将您的数组转换为 HTML 表格。以下是使用 jQuery 的方法：

function arrayToTable(tableData) {
    var table = $('<table></table>');
    $(tableData).each(function (i, rowData) {
        var row = $('<tr></tr>');
        $(rowData).each(function (j, cellData) {
            row.append($('<td>'+cellData+'</td>'));
        });
        table.append(row);
    });
    return table;
}

把所有东西放在一起

以下是您可以将所有内容组合在一起的方法：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script>
<script>
    function arrayToTable(tableData) {
        var table = $('<table></table>');
        $(tableData).each(function (i, rowData) {
            var row = $('<tr></tr>');
            $(rowData).each(function (j, cellData) {
                row.append($('<td>'+cellData+'</td>'));
            });
            table.append(row);
        });
        return table;
    }

    $.ajax({
        type: "GET",
        url: "http://localhost/test/data.csv",
        success: function (data) {
            $('body').append(arrayToTable(Papa.parse(data).data));
        }
    });
</script>

【讨论】：

需要将 csv 文本转换为 javscript 数组才能使用forEach。 dataType 也无效...请参阅文档
@charlietfl：你是对的。我忘记了 jQuery 不会自动解析 CSV。我刚刚用更完整的程序更新了我的答案！
@JohnSlegers 。我的 data.csv 文件应该存储在哪里？另外请在我的问题帖子中查看我的代码。谢谢
@ddpd ：您的 data.csv 应存储在与您正在运行的脚本相同的服务器上的公共位置。所以如果你的域名是www.mydomain.com，你可以把它放在例如。在www.mydomain.com/data.csv
@ddpd : C:\Users\tim tom\Desktop\csvTOhtml\data.csv 不起作用，因为它是本地路径。如果您希望它在您的笔记本电脑/台式计算机上本地运行，您需要安装像 Apache 这样的 Web 服务器，然后将您的脚本放在与 http://localhost 对应的文件夹中。