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

我有一个独立的HTML页面（没有web服务器），我后面的一些javascript代码将显示页面中的.csv文件的内容。在html页面显示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文件中的数据

@ cars10在csv文件中有什么示例：

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>

来源

2017-08-01 madmiddle

您是否有示例代码？ csv文件的外观如何？你究竟试过了什么？我们可以帮助解决具体问题，现在你有点要求为你做所有的工作。 – Barthy

CSV文件的内容是否更改？ – Nisarg

@Barthy添加了最近的代码我有，虽然我需要用.csv文件中的数据填充'data'，名为data.csv – madmiddle

这是一个完整的工作示例（甚至工作在本地目录中，即没有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 - read local text file。

来源

2017-08-01 15:28:51 cars10m

请问downvoter请解释一下，为什么？ – cars10m

我已经添加了通常在csv文件中的信息，但是我已经将它命名为data.csv，如果我将csv，txt更改为data.csv，会有所作为？他们都在同一个目录 – madmiddle

嗯，是的，如果您使用数据显示在您编辑的文章中，我的解决方案应该工作。随意更改我的格式化函数'tbl（）'以满足您的需求！我的示例预期制表符（'\ t'）来分隔字段。对于你的数据使用'tr.replace（/，/ g，''）'代替。 – cars10m

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

回答

相关问题