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

news/2024/7/21 7:26:14 标签: 表格转网页, html, web, excel, 原型
webkit-tap-highlight-color: rgba(0, 0, 0, 0);">

前言

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

生成

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

在这里插入图片描述

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

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

在这里插入图片描述

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

html"><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.niftyadmin.cn/n/5387781.html

相关文章

Day17_集合与数据结构(链表,栈和队列,Map,Collections工具类,二叉树,哈希表)

文章目录 Day17 集合与数据结构学习目标1 数据结构2 动态数组2.1 动态数组的特点2.2 自定义动态数组2.3 ArrayList与Vector的区别&#xff1f;2.4 ArrayList部分源码分析1、JDK1.6构造器2、JDK1.7构造器3、JDK1.8构造器4、添加与扩容5、删除元素6、get/set元素7、查询元素8、迭…

3分钟看懂设计模式01:策略模式

一、什么是策略模式 定义一些列算法类&#xff0c;将每一个算法封装起来&#xff0c;并让它们可以互相替换。 策略模式让算法独立于使用它的客户而变化&#xff0c;是一种对象行为型模式。 以上是策略模式的一般定义&#xff0c;属于是课本内容。 在没有真正理解策略模式之…

读书笔记:《看电影学金融》

大空头 禁止做空可以延缓资产价格下降的过程&#xff0c;但是人为保护的高股价最终还是不能持续的。做空引入的空头买家&#xff0c;可以增加市场的流动性。住房价格指数期货使房地产的投资属性与住宅属性分离&#xff0c;降低因炒房而空置的房屋&#xff0c;降低房价。收益互…

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…

Java架构师之路八、安全技术:Web安全、网络安全、系统安全、数据安全等

目录 Web安全&#xff1a; 网络安全&#xff1a; 系统安全&#xff1a; 数据安全&#xff1a; Java架构师之路七、大数据&#xff1a;Hadoop、Spark、Hive、HBase、Kafka等-CSDN博客Java架构师之路九、设计模式&#xff1a;常见的设计模式&#xff0c;如单例模式、工厂模式…

跨越千年医学对话:用AI技术解锁中医古籍知识,构建能够精准问答的智能语言模型,成就专业级古籍解读助手(LLAMA)

跨越千年医学对话&#xff1a;用AI技术解锁中医古籍知识&#xff0c;构建能够精准问答的智能语言模型&#xff0c;成就专业级古籍解读助手&#xff08;LLAMA&#xff09; 介绍&#xff1a;首先在 Ziya-LLaMA-13B-V1基线模型的基础上加入中医教材、中医各类网站数据等语料库&am…

java面试题之mybatis篇

什么是ORM&#xff1f; ORM&#xff08;Object/Relational Mapping&#xff09;即对象关系映射&#xff0c;是一种数据持久化技术。它在对象模型和关系型数据库直接建立起对应关系&#xff0c;并且提供一种机制&#xff0c;通过JavaBean对象去操作数据库表的数据。 MyBatis通过…

【开源】SpringBoot框架开发音乐平台

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、系统展示 四、核心代码4.1 查询单首音乐4.2 新增音乐4.3 新增音乐订单4.4 查询音乐订单4.5 新增音乐收藏 五、免责说明 一、摘要 1.1 项目介绍 基于微信小程序JAVAVueSpringBootMySQL的音乐平台&#xff0c;包含了音乐…