Question

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

我没有长时间学习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

Answer 1

您可以使用 d3.js

在html中实现显示csv数据

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

Answer 2

我不认为这有一个微不足道的解决方案。坚持使用客户端JavaScript使得这比在服务器端进行处理并简单地提供HTML更加困难。

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

如果您还在学习，我建议您跳过第一位，只需创建一个包含数据的JavaScript变量。通过这种方式，您可以编写代码来构建表，使其工作，然后再回过头来担心如何使用AJAX从服务器实际获取它。

备选方案，请查看使用PHP等服务器端语言，将数据合并到页面中，然后再将其提供给浏览器。在不了解更多细节的情况下，这似乎是更合乎逻辑的解决方案。

Answer 3

你需要使用javascript（jquery）或php 这是用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>

Answer 4

获取外部文件。

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

您需要在Apache等本地服务器中运行HTML文件，像Chrome这样的浏览器不允许xmlHttp用于file://网址。

  $.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?

您甚至可以Shadow Wizard使用iframes尝试上述问题的答案。

RAW XMLHttpRequest可以在没有jQuery的情况下制作，如here

所示

Answer 5

<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文件

Answer 6

我用PHP解析服务器端的CSV文件，然后将输出格式化为HTML。在此过程中，它将CSV列中的唯一值转换为唯一过滤器值，以优化结果集。

以HTML格式显示CSV文件

6 个答案: