将任意 CSV 文件显示为可搜索、可过滤的精美 HTML 表格

derekeder / **csv-to-html-table ** Public

🔽 将任意 CSV (逗号分隔值) 文件显示为可搜索、可过滤的精美 HTML 表格 derekeder.github.io/csv-to-html-table/

License

MIT license 897 stars 332 forks Branches Tags Activity Star Notifications You must be signed in to change notification settings

Additional navigation options

derekeder/csv-to-html-table

master BranchesTags Go to file Code

Folders and files

Name| Name| Last commit message| Last commit date
---|---|---|---

Latest commit

History

84 Commits
.github/ISSUE_TEMPLATE| .github/ISSUE_TEMPLATE
css| css
data| data
js| js
.gitignore| .gitignore
LICENSE| LICENSE
README.md| README.md
index.html| index.html
View all files

Repository files navigation

CSV to HTML Table

将任意 CSV 文件显示为可搜索、可过滤的精美 HTML table。完全使用 JavaScript 实现。

查看在线演示：https://csv-to-html-table.netlify.app/ Screen Shot 2021-03-26 at 4 53 39 PM

使用方法

1. 克隆此仓库（在命令行中）

git clone git@github.com:derekeder/csv-to-html-table.git
cd csv-to-html-table

2. 将您的 CSV 文件添加到 data/ 文件夹

3. 在 index.html 中，在 CsvToHtmlTable.init() 函数中设置您的选项

<script>
 CsvToHtmlTable.init({
  csv_path: 'data/Health Clinics in Chicago.csv', 
  element: 'table-container', 
  allow_download: true,
  csv_options: {separator: ',', delimiter: '"'},
  datatables_options: {"paging": false}
 });
</script>
可用选项

自定义格式化

如果您想为一个或多个列执行自定义格式化，您可以传入一个包含列索引和用于格式化的自定义函数的数组。 您可以传入多个格式化程序，它们将按顺序执行。 自定义函数必须接受一个参数（单元格中的值）并返回一个 HTML 字符串： 例子：

<script>
 // 创建超链接的自定义函数
 function format_link(link){
  if (link)
   return "<a href='" + link + "' target='_blank'>" + link + "</a>";
  else
   return "";
 }
 // 初始化表格
 CsvToHtmlTable.init({
  csv_path: 'data/Health Clinics in Chicago.csv', 
  element: 'table-container', 
  allow_download: true,
  csv_options: {separator: ',', delimiter: '"'},
  datatables_options: {"paging": false},
  custom_formatting: [[4, format_link]] // 在每行的第 4 列上执行该函数
 });
</script>

请注意，您应该注意 HTML 转义，以避免 XSS 或布局损坏。 jQuery 有一个很好的函数 text()，可以安全地从值中转义 HTML。

4. 运行它

您可以使用以下方便的 Python 命令在本地运行它：

python -m SimpleHTTPServer

...或者使用 Python 3：

python -m http.server

导航到 http://localhost:8000/

5. 部署它

GitHub pages 您可以在 GitHub pages 上免费托管您的表格！ 在您进行了所有更改并提交它们后，将 master 分支中的所有内容推送到 gh-pages，这将自动启用 GitHub pages。

git push origin master:gh-pages

然后导航到 http://your-github-username.github.io/csv-to-html-table/ 阅读更多关于使用 GitHub pages 项目 的信息。 Web server 此项目应可在任何 Web 服务器上运行。 使用 FTP 将整个项目（包括所有 css、data、fonts 和 js 文件夹）上传到服务器上的公共文件夹。

6. 使用 iframe（可选）

想在您的网站上嵌入您精美的表格吗？ 您可以使用 iframe。 部署表格后（如上面的第 5 步所述），您可以在 HTML 中的 iframe 中链接到它。

<iframe style="border-style: none;" src="http://derekeder.github.io/csv-to-html-table/" height="950" width="600"></iframe>

依赖项

常见问题/故障排除

如果您的表格未显示任何数据，请尝试以下操作：

  1. 使用 Chrome developer console 或为 FireFox 安装 Firebug。 这将允许您调试您的 JavaScript。
  2. 在浏览器中打开您的表格并打开 JavaScript 控制台
    • Mac 上的 Chrome developer console：Option+Command+J
    • PC 上的 Chrome developer console：Control+Shift+J
    • Firefox 中的 Firebug：工具 => Web 开发者 => Firebug => 打开 Firebug）
  3. 如果您确实看到 JavaScript 错误，该错误将告诉您它在哪一行失败。 最好从那里开始！

错误 / Bug

如果某些行为不符合直觉，则这是一个 bug，应进行报告。 在此处报告：https://github.com/derekeder/csv-to-html-table/issues

贡献者

关于补丁/Pull Requests的说明

版权

Copyright (c) 2018 Derek Eder. 根据 MIT License 发布。

关于

🔽 将任意 CSV (逗号分隔值) 文件显示为可搜索、可过滤的精美 HTML 表格 derekeder.github.io/csv-to-html-table/

Resources

Readme

License

MIT license Activity

Stars

897 stars

Watchers

41 watching

Forks

332 forks Report repository

Releases

No releases published

Packages 0

No packages published

Contributors 7

Languages

Footer

© 2025 GitHub, Inc.

Footer navigation

You can’t perform that action at this time.