繁体   English   中英

在网页上动态显示 CSV 文件作为 HTML 表格

[英]Dynamically display a CSV file as an HTML table on a web page

我想在服务器端获取一个 CSV 文件并将其动态显示为 html 表。 例如,这个:

Name, Age, Sex
"Cantor, Georg", 163, M

应该变成这样:

<html><body><table>
<tr> <td>Name</td> <td>Age</td> <td>Sex</td> </tr>
<tr> <td>Cantor, Georg</td> <td>163</td> <td>M</td> </td>
</table></body></html>

欢迎使用任何语言的解决方案。

之前链接的解决方案是一段可怕的代码; 几乎每一行都包含一个错误。 使用fgetcsv代替:

<?php
echo "<html><body><table>\n\n";
$f = fopen("so-csv.csv", "r");
while (($line = fgetcsv($f)) !== false) {
        echo "<tr>";
        foreach ($line as $cell) {
                echo "<td>" . htmlspecialchars($cell) . "</td>";
        }
        echo "</tr>\n";
}
fclose($f);
echo "\n</table></body></html>";

这是一个使用 php 将 csv 转换为 html 表的简单函数:

function jj_readcsv($filename, $header=false) {
$handle = fopen($filename, "r");
echo '<table>';
//display header row if true
if ($header) {
    $csvcontents = fgetcsv($handle);
    echo '<tr>';
    foreach ($csvcontents as $headercolumn) {
        echo "<th>$headercolumn</th>";
    }
    echo '</tr>';
}
// displaying contents
while ($csvcontents = fgetcsv($handle)) {
    echo '<tr>';
    foreach ($csvcontents as $column) {
        echo "<td>$column</td>";
    }
    echo '</tr>';
}
echo '</table>';
fclose($handle);
}

可以像jj_readcsv('image_links.csv',true);一样调用这个函数jj_readcsv('image_links.csv',true);

如果第二个参数为真,则 csv 的第一行将被视为标题/标题。

希望这可以帮助某人。 请评论此代码中的任何缺陷。

phihag 的回答将每一行放在一个单元格中,而您要求将每个值放在一个单独的单元格中。 这似乎做到了:

<?php
// Create a table from a csv file 
echo "<html><body><table>\n\n";
$f = fopen("so-csv.csv", "r");
while (($line = fgetcsv($f)) !== false) {
        $row = $line[0];    // We need to get the actual row (it is the first element in a 1-element array)
        $cells = explode(";",$row);
        echo "<tr>";
        foreach ($cells as $cell) {
            echo "<td>" . htmlspecialchars($cell) . "</td>";
        }
        echo "</tr>\n";
}
fclose($f);
echo "\n</table></body></html>";
?>

刚刚改进了phihag 的代码,因为如果文件不存在,它会进入无限循环。

<?php

$filename = "so-csv.csv";

echo "<html><body><table>\n\n";

if (file_exists($filename)) {
$f = fopen($filename, "r");
while (($line = fgetcsv($f)) !== false) {
        echo "<tr>";
        foreach ($line as $cell) {
                echo "<td>" . htmlspecialchars($cell) . "</td>";
        }
        echo "</tr>\n";
}
fclose($f);
}

else{ echo "<tr><td>No file exists ! </td></tr>" ;}
echo "\n</table></body></html>";
?>

这是使用一些引导程序更新的工作解决方案。 表格小、条纹、边框和悬停突出显示

function jj_readcsv($filename, $header = false)
{
    $handle = fopen($filename, "r");
    echo '<div class="table-responsive"><table class="table table-sm table-striped table-bordered table-hover">';
    //display header row if true
    if ($header) {
        $csvcontents = fgetcsv($handle);
        echo '<tr>';
        foreach ($csvcontents as $headercolumn) {
            echo "<th>$headercolumn</th>";
        }
        echo '</tr>';
    }
    // displaying contents
    while ($csvcontents = fgetcsv($handle)) {
        echo '<tr>';
        foreach ($csvcontents as $column) {
            echo "<td style='width:1px; white-space:nowrap;'>$column</td>";
        }
        echo '</tr>';
    }
    echo '</table></div>';
    fclose($handle);
}

HTML ...标签本身可以做到这一点,即没有PHP或java。

或查看此帖子以获取有关上述内容的完整详细信息(包含所有选项......)。

http://www.linuxquestions.org/questions/programming-9/how-to-show-csv-data-as-html-in-internet-explorer-with-filter-buttons-4175443612/

如果用 \\ 转义引号,它会起作用吗?

姓名、年龄、性别

“康托尔\\,乔治”,163,M

大多数分隔格式都要求对它们的分隔符进行转义,以便正确解析。


一个粗略的 Java 示例:

import java.util.Iterator;

public class CsvTest {

    public static void main(String[] args) {
        String[] lines = { "Name, Age, Sex", "\"Cantor, Georg\", 163, M" };

        StringBuilder result = new StringBuilder();

        for (String head : iterator(lines[0])) {
            result.append(String.format("<tr>%s</tr>\n", head));
        }

        for (int i=1; i < lines.length; i++) {
            for (String row : iterator(lines[i])) {
                result.append(String.format("<td>%s</td>\n", row));
            }
        }

        System.out.println(String.format("<table>\n%s</table>", result.toString()));
    }

    public static Iterable<String> iterator(final String line) {
        return new Iterable<String>() {
            public Iterator<String> iterator() {
                return new Iterator<String>() {
                    private int position = 0;

                    public boolean hasNext() {
                        return position < line.length();
                    }

                    public String next() {
                        boolean inquote = false;
                        StringBuilder buffer = new StringBuilder();
                        for (; position < line.length(); position++) {
                            char c = line.charAt(position);
                            if (c == '"') {
                                inquote = !inquote;
                            }
                            if (c == ',' && !inquote) {
                                position++;
                                break;
                            } else {
                                buffer.append(c);
                            }
                        }
                        return buffer.toString().trim();
                    }

                    public void remove() {
                        throw new UnsupportedOperationException();
                    }
                };
            }
        };
    }
}

XmlGrid.net 有将 csv 转换为 html 表的工具。 这是链接: http : //xmlgrid.net/csvToHtml.html

我使用了您的示例数据,并得到了以下 html 表:

<table>
<!--Created with XmlGrid Free Online XML Editor (http://xmlgrid.net)-->
<tr>
  <td>Name</td>
  <td> Age</td>
  <td> Sex</td>
</tr>
<tr>
  <td>Cantor, Georg</td>
  <td> 163</td>
  <td> M</td>
</tr>
</table>

定义“动态显示”? 这意味着该表是通过 javascript 和某种 Ajax-y 更新构建的。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM