快速将excel/word表格转换为web页面(html)的方法

前言

在进行开发企业信息化建设的过程,应该有很多这样的场景,就是将现有的电子表格记录的方式转换为在数据系统中进行网页上报。也就是需要根据当前一直使用的表格制作一个上传这个表格信息的网页,如果要减少系统的使用学习成本,加上系统的数据字段没有什么变更,我们可以直接沿用表格的样式,就需要快速的根据这个表格来生成对应的网页。从而能快速的做出一个演示Demo。

生成

这里以这个施工日志表来进行一个转换演示:

在这里插入图片描述

这里使用了wps为编辑软件,不过office好像也可以,以excel为例子,直接另存为html文件即可:
在这里插入图片描述

用浏览器打开文件,效果如图:
在这里插入图片描述

在这里插入图片描述

转换后网页的代码如下(去除了style和部分注释):

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="ProgId" content="Excel.Sheet"><meta name="Generator" content="WPS Office ET"></head><body link="blue" vlink="purple"><table width="1381.33" border="0" cellpadding="0" cellspacing="0" style='width:518.00pt;border-collapse:collapse;table-layout:fixed;'><col width="136" style='width:51.00pt;'/><col width="249.07" span="5" style='mso-width-source:userset;mso-width-alt:3985;'/><tr height="36" style='height:13.50pt;'><td height="36" width="136" style='height:13.50pt;width:51.00pt;'></td><td width="249.07" style='width:93.40pt;'></td><td width="249.07" style='width:93.40pt;'></td><td width="249.07" style='width:93.40pt;'></td><td width="249.07" style='width:93.40pt;'></td><td width="249.07" style='width:93.40pt;'></td></tr><tr height="64" style='height:24.00pt;mso-height-source:userset;mso-height-alt:480;'><td height="64" style='height:24.00pt;'></td><td class="xl65" colspan="5" style='border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext;' x:str>施工日志</td></tr><tr height="36" style='height:13.50pt;'><td height="36" style='height:13.50pt;'></td><td class="xl66" x:str>工程名称</td><td class="xl67" colspan="2" style='border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext;'></td><td class="xl66" x:str>编号</td><td class="xl68"></td></tr><tr height="36" style='height:13.50pt;'><td height="36" style='height:13.50pt;'></td><td class="xl66" x:str>施工单位</td><td class="xl67" colspan="4" style='border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext;'></td></tr><tr height="36" style='height:13.50pt;'><td height="36" style='height:13.50pt;'></td><td class="xl69"></td><td class="xl70" x:str>天气状况</td><td class="xl70" x:str>风力<span style='mso-spacerun:yes;'>&nbsp;</span></td><td class="xl70" x:str>最高/低温度</td><td class="xl70" x:str>备注</td></tr><tr height="36" style='height:13.50pt;'><td height="36" style='height:13.50pt;'></td><td class="xl66" x:str>白天</td><td class="xl68"></td><td class="xl68"></td><td class="xl68"></td><td class="xl68"></td></tr><tr height="36" style='height:13.50pt;'><td height="36" style='height:13.50pt;'></td><td class="xl66" x:str>夜间</td><td class="xl68"></td><td class="xl68"></td><td class="xl68"></td><td class="xl68"></td></tr><tr height="45.33" style='height:17.00pt;mso-height-source:userset;mso-height-alt:340;'><td height="45.33" style='height:17.00pt;'></td><td class="xl71" colspan="5" style='border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext;' x:str>情况记录:(内容、作业、班组工作,存在的问题及处理情况等)</td></tr><tr height="373.33" style='height:140.00pt;mso-height-source:userset;mso-height-alt:2800;'><td height="373.33" style='height:140.00pt;'></td><td class="xl72" colspan="5" style='border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext;' x:str><font class="font3">(具体内容填入人员情况,设备情况,生产情况,质量安全工作记录,备注。然后交予工程师/建造师,或者业主,或者项目经理进行签字。需要注意的一点是,如果施工当天没有工作,必须也要填写施工日志,保持其连续性,不可后补,也不可修正。)</font><font class="font0"><br/><br/></font></td></tr><tr height="85.33" style='height:32.00pt;mso-height-source:userset;mso-height-alt:640;'><td height="85.33" style='height:32.00pt;'></td><td class="xl74" colspan="5" style='border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext;' x:str>技术质量安全工作记录:(技术质量安全活动,检查评定验收、技术质量安全问题处理情况等)</td></tr><tr height="506.67" style='height:190.00pt;mso-height-source:userset;mso-height-alt:3800;'><td height="506.67" style='height:190.00pt;'></td><td class="xl75" colspan="5" style='border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext;'></td></tr><tr height="36" style='height:13.50pt;'><td height="36" style='height:13.50pt;'></td><td class="xl66" x:str>记录人</td><td class="xl78" colspan="2" style='border-right:.5pt solid windowtext;border-bottom:.5pt solid windowtext;'></td><td class="xl66" x:str>日 期</td><td class="xl67"></td></tr><![if supportMisalignedColumns]><tr width="0" style='display:none;'><td width="249" style='width:93;'></td></tr><![endif]></table></body>
</html>

从转换后的网页代码来看,个人觉得是没法直接使用到系统开发中的,因为比较冗长,而且可读性会差很多,如果熟练可以截取html元素进行后续开发。这个还是比较适用于基于现成表格的快速网页原型展示。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/484467.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue3之ref与reactive的基本使用

ref可以创建基本类型、对象类型的响应式数据 reactive只可以创建对象类型的响应式数据 接下来让我为大家介绍一下吧&#xff01; 在Vue3中&#xff0c;我们想让数据变成响应式数据&#xff0c;我们需要借助到ref与reactive 先为大家介绍一下ref如何使用还有什么注意点 我们需…

考研高数(高阶导数的计算)

1.归纳法 常见高阶导数 2.泰勒展开式 3.莱布尼兹公式 4.用导数定义证明导函数在某一点连续的例题

MLflow【部署 01】MLflow官网Quick Start实操(一篇学会部署使用MLflow)

一篇学会部署使用MLflow 1.版本及环境2.官方步骤Step-1 Get MLflowStep-2 Start a Tracking ServerStep 3 - Train a model and prepare metadata for loggingStep 4 - Log the model and its metadata to MLflowStep 5 - Load the model as a Python Function (pyfunc) and us…

alibabacloud学习笔记06(小滴课堂)

讲Sentinel流量控制详细操作 基于并发线程进行限流配置实操 在浏览器打开快速刷新会报错 基于并发线程进行限流配置实操 讲解 微服务高可用利器Sentinel熔断降级规则 讲解服务调用常见的熔断状态和恢复 讲解服务调用熔断例子 我们写一个带异常的接口&#xff1a;

【海贼王的数据航海:利用数据结构成为数据海洋的霸主】时间复杂度 | 空间复杂度

目录 1 -> 算法效率 1.1 -> 如何衡量一个算法的好坏&#xff1f; 1.2 -> 算法的复杂度 2 -> 时间复杂度 2.1 -> 时间复杂度的概念 2.2 -> 大O的渐进表示法 2.3 -> 常见时间复杂度计算 3 -> 空间复杂度 4 -> 常见复杂度对比 1 -> 算法效…

IO进程线程

IO练习 互斥机制练习 #include <myhead.h> int num 520; pthread_mutex_t mutex;void *task1(void *arg) {printf("11111111\n");pthread_mutex_lock(&mutex);num 1314;sleep(3);printf("task1:num%d\n",num);pthread_mutex_unlock(&mut…

Vue样式绑定

1. 绑定 HTML class ①通过class名称的bool值判断样式是否被启用 <template><!--通过样式名称是否显示控制样式--><div :class"{ haveBorder: p.isBorder, haveBackground-color: p.isBackgroundcolor }">此处是样式展示区域</div><br /…

基于springboot+vue的中小企业设备管理系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

mac真的安装不了vmware吗 mac如何安装crossover crossover序列号从哪里买 购买正版渠道

有些用户可能想在mac上运行一些只能在windows上运行的软件&#xff0c;比如游戏、专业软件等。这时候&#xff0c;就需要用到虚拟机技术&#xff0c;也就是在mac上安装一个可以模拟其他操作系统的软件&#xff0c;比如vmware或者crossover。那么&#xff0c;mac真的安装不了vmw…

众安保险基于Apache SeaTunnel的生产应用实践

*> 文&#xff5c;曾力 众安保险大数据开发高级专家 编辑整理&#xff5c; 曾辉* 前言 众安保险从2023年4月就开始了数据集成服务的预研工作&#xff0c;意在通过该服务解决当前数据同步场景下的两大痛点&#xff0c;服务化能力薄弱和无分布式同步能力。我们对多种开源数据…

独家深度 | 一文看懂 ClickHouse vs Elasticsearch:谁更胜一筹?

简介&#xff1a; 本文的主旨在于通过彻底剖析ClickHouse和Elasticsearch的内核架构&#xff0c;从原理上讲明白两者的优劣之处&#xff0c;同时会附上一份覆盖多场景的测试报告给读者作为参考。 作者&#xff1a;阿里云数据库OLAP产品部 仁劼 原文地址:https://developer.ali…

ubuntu20.04安装实时内核补丁PREEMPT_RT

参考&#xff1a; Ubuntu 18.04安装 RT-PREEMPT 实时内核及补丁【过程记录】_ubuntu18.04 preempt rt linux 5.6.19-CSDN博客 https://github.com/UniversalRobots/Universal_Robots_ROS_Driver/blob/master/ur_robot_driver/doc/real_time.md当前内核&#xff1a;5.15.0-94-ge…