在html页面中显示csv文件的内容

Question

I have a standalone HTML page (no webserver) and I'm after some javascript code that will display the contents of a .csv file in the page. 我有一个独立的HTML页面（没有网络服务器），并且正在寻找一些JavaScript代码，这些代码将在页面中显示.csv文件的内容。

The .csv file contains a list of usernames that I would like to be displayed. .csv文件包含我要显示的用户名列表。 I'm doing it this way as the people that need to update the list know nothing of HTML and initially thought this would be an easier way to do it. 我这样做是因为需要更新列表的人员对HTML一无所知，并且最初认为这将是一种更简单的方法。

All the code snippets that I have found either try to upload a file and then only display the contents till you reload the page again or I don't have enough knowledge to tweak the code to work. 我发现的所有代码段都尝试上载文件，然后仅显示内容，直到您再次重新加载页面为止，或者我没有足够的知识来调整代码以使其正常工作。

Any help appreciated & TYIA 任何帮助表示赞赏＆TYIA

Andy 安迪

@Barthy code that is very close to what I would like is this: 与我想要的非常接近的@Barthy代码是这样的：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            table {
            border-collapse: collapse;
            border: 2px black solid;
            font: 12px sans-serif;
            }
            td {
            border: 1px black solid;
            padding: 5px;
            }
        </style>
    </head>
    <body>
        <div id='container'></div>
        <script type="text/javascript"charset="utf-8">
        var data = 'heading1,heading2,heading3,heading4,heading5\nvalue1_1,value2_1,value3_1,value4_1,value5_1\nvalue1_2,value2_2,value3_2,value4_2,value5_2';
        var lines = data.split("\n"),
        output = [],
        i;
        for (i = 0; i < lines.length; i++)
        output.push("<tr><td>"
        + lines[i].slice(0,-1).split(",").join("</td><td>")
        + "</td></tr>");
        output = "<table>" + output.join("") + "</table>";
        var div = document.getElementById('container');

        div.innerHTML = output;
        </script>
   </body>
</html>

but would like to get data from CSV file 但想从CSV文件中获取数据

@cars10 example of what is in the csv file: csv文件中包含@ cars10的示例：

Heading_1,Heading_2,Heading_3,Heading_4
John,     Smith,    29,       Male
Andy,     Jones,    32,       Male
Abbey,    Stewart,  35,       Female

if that helps 如果有帮助

Solution so far: 到目前为止的解决方案：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
        <style>
            table {
            border-collapse: collapse;
            border: 2px black solid;
            font: 12px sans-serif;
            }
            td {
            border: 1px black solid;
            padding: 5px;
            }
        </style>

        <script>
            window.onload=function(){ with (new XMLHttpRequest()) {
            onreadystatechange=cb; open('GET','data.csv',true); responseType='text';send();
            }}
            function cb(){if(this.readyState===4)document.getElementById('main')
                                         .innerHTML=tbl(this.responseText); }
            function tbl(csv){ // do whatever is necessary to create your   table here ...
            return csv.split('\n')
            .map(function(tr,i){return '<tr><td>'
                                 +tr.replace(/\t/g,'</td><td>')
                                 +'</td></tr>';})
        .join('\n'); }
        </script>
        </head>
        <body>
            <h2>Hey, this is my fabulous "dynamic" html page!</h2>
            <table id="main"></table>
        </body>
    </html>

Answer 1

Here is a complete working example (works even on a local directory, ie no web server at all!). 这是一个完整的工作示例（甚至可以在本地目录上工作，即根本没有Web服务器！）。 This is a plain JavaScript solution. 这是一个简单的JavaScript解决方案。 Personally, I would always use jquery, but in this simple case you can do without it. 就个人而言，我将始终使用jquery，但在这种简单情况下，您可以不用它。

The page expects the csv-file ("csv.txt") in the same directory. 该页面需要在同一目录中的csv文件（“ csv.txt”）。 But it is up to you to specify another (relative) path in the oReq.open() line. 但是由您决定在oReq.open()行中指定另一个（相对）路径。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function(){ with (new XMLHttpRequest()) {
  onreadystatechange=cb; open('GET','csv.txt',true); responseType='text';send();
}}
function cb(){if(this.readyState===4)document.getElementById('main')
                                             .innerHTML=tbl(this.responseText); }
function tbl(csv){ // do whatever is necessary to create your table here ...
 return csv.split('\n')
           .map(function(tr,i){return '<tr><td>'
                                     +tr.replace(/\t/g,'</td><td>')
                                     +'</td></tr>';})
           .join('\n'); }
</script>
</head>
<body>
<h2>Hey, this is my fabulous "dynamic" html page!</h2>
<table id="main"></table>
</body>
</html>

I got my inspiration from here: Javascript - read local text file . 我从这里得到了启发： Javascript-读取本地文本文件。

在html页面中显示csv文件的内容

问题描述

1 个解决方案

解决方案1
4 已采纳 2017-08-01 15:28:51

在html页面中显示csv文件的内容

问题描述

1 个解决方案

解决方案1 4 已采纳 2017-08-01 15:28:51

解决方案1
4 已采纳 2017-08-01 15:28:51