以HTML格式显示CSV文件

问题描述：

我在导入一个带有标题的本地CSV文件到一个本地HTML文件中，然后该文件将在浏览器中显示为一个表格。以HTML格式显示CSV文件

我没有长时间学习HTML和JavaScript，所以我对导入和转换了解不多。我需要的是一些建议，或者可能是描述我需要的功能的基本脚本。解释和建议都欢迎！

这是CSV文件的一个例子：

heading1,heading2,heading3,heading4,heading5 
    value1_1,value1_2,value1_3,value1_4,value1_5 
    value2_1,value2_2,value2_3,value2_4,value2_5 
    value3_1,value3_2,value3_3,value3_4,value3_5 
    value4_1,value4_2,value4_3,value4_4,value4_5 
    value5_1,value5_2,value5_3,value5_4,value5_5

这是我怎么会想显示它：

http://jsfiddle.net/yekdkdLm

与本地，你的意思是服务器上的CSV，对不对？ – davidkonrad 2014-09-05 11:04:20

不，我的意思是一个简单的csv文本文件与html文件在同一个文件夹中，im仍然有点学习，但是我查看的所有地方都没有真正解释他们做了什么或者如何访问该数据 – 2014-09-05 11:08:43

[Here] （https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications）您可以找到从浏览器访问本地文件的示例。您稍后需要编写用于拆分和创建表格的代码。 – szpic 2014-09-05 11:33:50

答

用PHP来打开和获取值取一个外部文件中的代码。

您必须为此使用xmlHttpRequest。简化使用jQuery（包括jQuery库）为。

您将需要运行在一个本地服务器，如Apache的HTML文件，浏览器 Chrome等犯规让xmlHttp为file://的URL。

$.ajax({ 
    type: "GET", 
    url: "words.txt", 
    dataType: "text", 
    success: parseTxt 
    });

使用一个成功的回调来处理数据

parseTxt是该文件的内容被读出并passed功能。然后，您可以在parseTxt中编写代码以将文本处理为字符串。

function parseTxt(text){ 
    var rows=text.split('\n'); 

    //for each row 
    //cols=rows[i].split(','); 
}

这应该足以让你开始我猜。

How to read a text file from server using JavaScript?

你甚至可以尝试使用iframes由Shadow Wizard回答上面的问题。

一个RAW XMLHttpRequest可以不jQuery的进行，如图here

啊，这看起来不错，我得试试看 – 2014-09-05 12:23:30

答

我不认为这是一个平凡解对此。坚持使用客户端JavaScript使得这比在服务器端进行处理和简单地提供HTML更困难。

您首先需要使用JavaScript从服务器获取文件，最简单的方法是使用jQuery库。接下来，您需要获取数据并在现有文档中构建HTML，再次，jQuery将为您简化此操作。

如果你仍然在学习，我建议跳过第一位，并简单地创建一个JavaScript变量，其中已有数据。通过这种方式，您可以编写代码来构建表，使其发挥作用，然后回过头来担心如何使用AJAX从服务器获取该代码。

另一种方法是，使用PHP等服务器端语言，在将数据传递到浏览器之前将数据合并到页面中。不知道更多细节，这似乎是更合乎逻辑的解决方案。

啊，我看到了，难怪我找不到一个简单的解决方案。这是所有这种类型的导入文件的情况吗？ – 2014-09-05 11:23:48

这不是造成困难的文件类型。这是因为CSV文件位于服务器上，但JavaScript将在本地计算机上运行。无论文件的格式如何，您都需要AJAX从服务器获取文件。 – 2014-09-05 14:54:46

答

你需要使用JavaScript（jQuery的）或者PHP 这是在一个表中

<table> 
<tr> 
    <td>Header 1</td> 
    <td>Header 2</td> 
</tr> 
<?php 
    $fp = fopen ("file.csv" , "r"); 
    while (($data = fgetcsv ($fp , 1000 , ",")) !== FALSE) { 
     $i = 0; 
     echo "<tr>"; 
     foreach($data as $row) { 
      echo "<td>" . $row . "</td>"; 
      $i++ ; 
     } 
     echo "/<tr>"; 
    } 
    fclose ($fp); 
    ?> 
</table>

答

<div id="CSVTable"></div> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="//jquerycsvtotable.googlecode.com/files/jquery.csvToTable.js"></script> 

<script> 
$(function() { 
    $('#CSVTable').CSVToTable('your_csv.csv'); 
}); 
</script>

可以使用jquery.csvToTable.js在HTML中显示CSV文件

答

您可以实现在显示CSV数据html使用d3.js

这里最简单的例子： http://bl.ocks.org/ndarville/7075823

以HTML格式显示CSV文件

相关推荐