Показать CSV-файл в HTML

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

Fetch внешний файл.

Для этого вам необходимо использовать xmlHttpRequest. Упрощен с помощью jQuery (включая библиотеку jQuery) как.

Вам нужно будет запустить файл HTML в локальном сервере, как Apache, браузеры, такие как Chrome оленья кожа позволяют xmlHttp для file:// URLs.

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

<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 для отображения файла CSV в HTML

Answer 5

Вы можете реализовать данные отображения в формате CSV html с использованием d3.js

Вот простейший пример: http://bl.ocks.org/ndarville/7075823