0

0

如何在网页中动态展示Excel数据并生成图表

霞舞

霞舞

发布时间:2026-03-06 22:17:00

|

390人浏览过

|

来源于php中文网

原创

如何在网页中动态展示Excel数据并生成图表

本文介绍如何使用python(pandas + plotly/matplotlib)将excel表格中的数值与文本数据高效导出为网页可嵌入的html表格及交互式图表,无需服务器端php或复杂前端开发。

本文介绍如何使用python(pandas + plotly/matplotlib)将excel表格中的数值与文本数据高效导出为网页可嵌入的html表格及交互式图表,无需服务器端php或复杂前端开发。

在Web开发中,直接用纯HTML无法读取本地Excel文件——因为浏览器出于安全限制,禁止JavaScript随意访问文件系统;而PHP虽可服务端解析Excel,但需配置环境、处理编码与依赖(如PhpSpreadsheet),对轻量需求略显冗余。更简洁专业的方案是:使用Python预处理Excel数据,生成静态但功能完备的HTML页面,既保留原始格式,又支持可视化图表嵌入。

一、基础表格导出:pandas一行转HTML

pandas 提供了开箱即用的 to_html() 方法,可将DataFrame直接转为语义化HTML表格:

import pandas as pd

# 读取Excel(支持.xlsx、.xls;自动识别首行作列名)
df = pd.read_excel("data/sales_report.xlsx")

# 生成带样式的基础HTML表格(可保存为文件或嵌入网页)
html_table = df.to_html(
    index=False,                    # 不显示行索引
    classes="table table-striped",  # 添加CSS类,便于Bootstrap美化
    table_id="excel-data-table",    # 设置ID,方便JS操作
    escape=False                    # 允许单元格含HTML标签(如超链接)
)

# 写入HTML文件
with open("output/table.html", "w", encoding="utf-8") as f:
    f.write("<!DOCTYPE html><html><head><meta charset='utf-8'><title>Excel Data</title></head><body>")
    f.write(html_table)
    f.write("</body></html>")

注意事项

传媒公司模板(RTCMS)1.0
传媒公司模板(RTCMS)1.0

传媒企业网站系统使用热腾CMS(RTCMS),根据网站板块定制的栏目,如果修改栏目,需要修改模板相应的标签。站点内容均可在后台网站基本设置中添加。全站可生成HTML,安装默认动态浏览。并可以独立设置SEO标题、关键字、描述信息。源码包中带有少量测试数据,安装时可选择演示安装或全新安装。如果全新安装,后台内容充实后,首页才能完全显示出来。(全新安装后可以删除演示数据用到的图片,目录在https://

下载
  • 确保已安装 openpyxl(读取 .xlsx)或 xlrd(旧版 .xls):pip install pandas openpyxl
  • 中文路径/内容需指定 encoding="utf-8" 并确保Excel本身编码兼容(推荐用UTF-8保存CSV作为备选)
  • to_html() 默认不包含CSS样式,建议配合Bootstrap、Tailwind等框架增强视觉效果

二、进阶:嵌入交互式图表(Plotly示例)

若需将Excel中的数值转化为动态图表(如柱状图、折线图),推荐使用 plotly.express 生成可缩放、悬停提示的HTML图表,并与表格整合:

import plotly.express as px

# 假设Excel含"Month"和"Revenue"两列
fig = px.bar(df, x="Month", y="Revenue", title="月度营收趋势", text="Revenue")
fig.update_traces(texttemplate='%{text:.2s}', textposition='outside')
fig.update_layout(height=400)

# 导出为独立HTML片段(含完整JS依赖)
chart_html = fig.to_html(
    include_plotlyjs='cdn',  # 从CDN加载Plotly JS,减小文件体积
    full_html=False,         # 仅输出图表部分HTML,便于嵌入
    default_height='400px'
)

# 合并表格与图表到同一页面
full_html = f"""
<!DOCTYPE html>
<html><head><meta charset='utf-8'><title>Excel Dashboard</title></head>
<body>
<h2>原始数据表</h2>
{html_table}
<h2>可视化分析</h2>
{chart_html}
</body></html>
"""

with open("output/dashboard.html", "w", encoding="utf-8") as f:
    f.write(full_html)

生成的 dashboard.html 可直接双击在浏览器中打开,所有交互功能(缩放、下载、悬停)均离线可用。

三、部署与优化建议

  • ? 自动化更新:将上述脚本加入定时任务(如Linux cron 或Windows Task Scheduler),实现Excel更新后自动刷新网页;
  • ? 轻量替代方案:若仅需简单图表且避免Plotly体积,可用 matplotlib.pyplot.savefig() 生成PNG再嵌入 如何在网页中动态展示Excel数据并生成图表
  • ? 安全提醒:切勿将Python脚本部署在公网可执行的Web服务器上直接读取用户上传的Excel——应先校验文件类型、大小与内容,防范恶意宏或内存溢出攻击。

通过pandas的数据处理能力与现代可视化库的协同,Excel到网页的转化不再是“不可能任务”,而是可控、可复现、可维护的标准工作流。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
Node.js后端开发与Express框架实践
Node.js后端开发与Express框架实践

本专题针对初中级 Node.js 开发者,系统讲解如何使用 Express 框架搭建高性能后端服务。内容包括路由设计、中间件开发、数据库集成、API 安全与异常处理,以及 RESTful API 的设计与优化。通过实际项目演示,帮助开发者快速掌握 Node.js 后端开发流程。

398

2026.02.10

Python 时间序列分析与预测
Python 时间序列分析与预测

本专题专注讲解 Python 在时间序列数据处理与预测建模中的实战技巧,涵盖时间索引处理、周期性与趋势分解、平稳性检测、ARIMA/SARIMA 模型构建、预测误差评估,以及基于实际业务场景的时间序列项目实操,帮助学习者掌握从数据预处理到模型预测的完整时序分析能力。

78

2025.12.04

Python 数据清洗与预处理实战
Python 数据清洗与预处理实战

本专题系统讲解 Python 在数据清洗与预处理中的核心技术,包括使用 Pandas 进行缺失值处理、异常值检测、数据格式化、特征工程与数据转换,结合 NumPy 高效处理大规模数据。通过实战案例,帮助学习者掌握 如何处理混乱、不完整数据,为后续数据分析与机器学习模型训练打下坚实基础。

12

2026.01.31

pip安装使用方法
pip安装使用方法

安装步骤:1、确保Python已经正确安装在您的计算机上;2、下载“get-pip.py”脚本;3、按下Win + R键,然后输入cmd并按下Enter键来打开命令行窗口;4、在命令行窗口中,使用cd命令切换到“get-pip.py”所在的目录;5、执行安装命令;6、验证安装结果即可。大家可以访问本专题下的文章,了解pip安装使用方法的更多内容。

373

2023.10.09

更新pip版本
更新pip版本

更新pip版本方法有使用pip自身更新、使用操作系统自带的包管理工具、使用python包管理工具、手动安装最新版本。想了解更多相关的内容,请阅读专题下面的文章。

432

2024.12.20

pip设置清华源
pip设置清华源

设置方法:1、打开终端或命令提示符窗口;2、运行“touch ~/.pip/pip.conf”命令创建一个名为pip的配置文件;3、打开pip.conf文件,然后添加“[global];index-url = https://pypi.tuna.tsinghua.edu.cn/simple”内容,这将把pip的镜像源设置为清华大学的镜像源;4、保存并关闭文件即可。

798

2024.12.23

python升级pip
python升级pip

本专题整合了python升级pip相关教程,阅读下面的文章了解更多详细内容。

370

2025.07.23

windows查看端口占用情况
windows查看端口占用情况

Windows端口可以认为是计算机与外界通讯交流的出入口。逻辑意义上的端口一般是指TCP/IP协议中的端口,端口号的范围从0到65535,比如用于浏览网页服务的80端口,用于FTP服务的21端口等等。怎么查看windows端口占用情况呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

1411

2023.07.26

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

1

2026.03.06

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Excel 教程
Excel 教程

共162课时 | 20.2万人学习

成为PHP架构师-自制PHP框架
成为PHP架构师-自制PHP框架

共28课时 | 2.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号