在html頁面中顯示csv文件的內容

Question

我有一個獨立的HTML頁面（沒有網絡服務器），並且正在尋找一些JavaScript代碼，這些代碼將在頁面中顯示.csv文件的內容。

.csv文件包含我要顯示的用戶名列表。 我這樣做是因為需要更新列表的人員對HTML一無所知，並且最初認為這將是一種更簡單的方法。

我發現的所有代碼段都嘗試上載文件，然后僅顯示內容，直到您再次重新加載頁面為止，或者我沒有足夠的知識來調整代碼以使其正常工作。

任何幫助表示贊賞＆TYIA

安迪

與我想要的非常接近的@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>

但想從CSV文件中獲取數據

csv文件中包含@ cars10的示例：

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

如果有幫助

到目前為止的解決方案：

<!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

這是一個完整的工作示例（甚至可以在本地目錄上工作，即根本沒有Web服務器！）。 這是一個簡單的JavaScript解決方案。 就個人而言，我將始終使用jquery，但在這種簡單情況下，您可以不用它。

該頁面需要在同一目錄中的csv文件（“ csv.txt”）。 但是由您決定在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>

我從這里得到了啟發： 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