Javascript 以 HTML 格式显示 CSV 文件

Display CSV file in HTML

提问by Roy Davies

I'm trying to import a local CSV file with headings into a local HTML file, which will then display as a table in a browser.

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

I haven't been learning HTMLand JavaScript for long, so I don't know a lot about importing and converting. What I need is some advice or possibly a basic script describing the sort of function I need. Explanations and advice are all welcomed!

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

This is an example of the csv file:

这是 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

This is how I'd want to display it:

这是我想要显示它的方式：

http://jsfiddle.net/yekdkdLm

http://jsfiddle.net/yekdkdLm

采纳答案by sabithpocker

Fetch an external file.

获取外部文件。

You have to use xmlHttpRequestfor this. Simplified using jQuery (include jQuery library) as.

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

You will need to run the HTML file in a local server like Apache, browsers like Chrome doesnt allow xmlHttpfor file://urls.

您需要在 Apache 等本地服务器中运行 HTML 文件，Chrome 等浏览器不允许xmlHttp使用file://url。

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

Use a success callback to process the data

使用成功回调来处理数据

parseTxtis the function to which the content of the file is read and passed. You can then write the code in parseTxtto process the text as string.

parseTxt是读取文件内容的函数，passed. 然后，您可以编写代码parseTxt以将文本作为字符串处理。

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

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

This should be enough to get you started I guess.

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

---

---

How to read a text file from server using JavaScript?

如何使用 JavaScript 从服务器读取文本文件？

You can even try the answer to above question by Shadow Wizardusing iframes.

您甚至可以Shadow Wizard使用iframes.

---

---

A RAW XMLHttpRequestcan be made without jQuery as shown here

一个RAWXMLHttpRequest可以在没有jQuery的进行如图所示这里

回答by Piyush Patel

You can implement display csv data in html using d3.js

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

Here's simplest example: http://bl.ocks.org/ndarville/7075823

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

回答by Shawn DeWolfe

I used PHP to parse the CSV file on the server side, then format that output as HTML. Along the way, it turns the unique values in the CSV columns into unique filter values to refine the result set.

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

回答by Philip Wattis

I don't think there is a trivial solution to this. An insistence on using client-side JavaScript makes this a more difficult task than doing the processing on the server-side and simply serving up the HTML.

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

You first need to use JavaScript to fetch the file from the server, the easiest way to do this is with the jQuery library. Next you need to take the data and construct the HTML in the existing document, again, jQuery will simplify this for you.

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

If you are still learning, I'd recommend skipping the first bit, and simply create a JavaScript variable with the data already in it. This way you can write the code to build the table, get this working, then go back to worrying about how you would actually fetch that from the server using AJAX.

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

Alternative, look at using a server-side language such as PHP which will incorporate the data into the page before delivering it to the browser. Without knowing more details, this would seem like the more logical solution.

或者，考虑使用服务器端语言（例如 PHP），该语言将在将数据传送到浏览器之前将数据合并到页面中。在不知道更多细节的情况下，这似乎是更合乎逻辑的解决方案。

回答by Javier

You need to use javascript(jquery) or php This is the code to open with php and get the values in a table

您需要使用 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>

回答by Ankit Agrawal

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

you can use jquery.csvToTable.js to display csv file in html

您可以使用 jquery.csvToTable.js 在 html 中显示 csv 文件