以HTML顯示CSV文件

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:// 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(',');
}

我想這應該足以讓您入門。

---

如何使用JavaScript從服務器讀取文本文件？

您甚至可以使用iframes通過Shadow Wizard嘗試解決上述問題。

---

一個RAW XMLHttpRequest可以不jQuery的進行如圖所示這里

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列中的唯一值轉換為唯一過濾器值以優化結果集。