快速将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元素进行后续开发。这个还是比较适用于基于现成表格的快速网页原型展示。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Imagewheel私人图床搭建结合内网穿透实现无公网IP远程访问教程

文章目录 1.前言2. Imagewheel网站搭建2.1. Imagewheel下载和安装2.2. Imagewheel网页测试2.3.cpolar的安装和注册 3.本地网页发布3.1.Cpolar临时数据隧道3.2.Cpolar稳定隧道&#xff08;云端设置&#xff09;3.3.Cpolar稳定隧道&#xff08;本地设置&#xff09; 4.公网访问测…

《VitePress 简易速速上手小册》第9章 VitePress 的扩展与插件(2024 最新版)

文章目录 9.1 插件生态系统概述9.1.1 基础知识点解析9.1.2 重点案例&#xff1a;SEO 优化插件9.1.3 拓展案例 1&#xff1a;社交分享插件9.1.4 拓展案例 2&#xff1a;内容搜索插件 9.2 常用插件介绍与应用9.2.1 基础知识点解析9.2.2 重点案例&#xff1a;使用 SEO 插件9.2.3 拓…

SpringBoot集成Mqtt发送消息

1. MQTT简介 MQTT是一种物联网消息协议&#xff0c;为Message Queuing Telemetry Transport的缩写&#xff0c;即消息队列传输探测&#xff0c;协议基于发布订阅模式进行通信&#xff0c;有开销低、带宽小、轻量的特点&#xff0c;通常应用在物联网数据采集、移动应用、智能硬…

C/C++的内存管理(1)

内存管理 C与C的内存分布C语言中动态内存管理方式回顾C内存管理的方式 C与C的内存分布 我们学习C语言时就知道&#xff0c;储存不同的变量计算机会相应分配不同区块的内存。那为什么要把内存化为不同的区域呢&#xff1f;实质上是为了方便管理 下面我们来看看下面一道例题&…

【Hudi】Upsert原理

17张图带你彻底理解Hudi Upsert原理 1.开始提交&#xff1a;判断上次任务是否失败&#xff0c;如果失败会触发回滚操作。然后会根据当前时间生成一个事务开始的请求标识元数据。2.构造HoodieRecord Rdd对象&#xff1a;Hudi 会根据元数据信息构造HoodieRecord Rdd 对象&#xf…

记录解决uniapp使用uview-plus在vue3+vite+ts项目中打包后样式不能显示问题

一、背景 从 vue2uview1 升级到 vue3vitetsuview-plus ,uview组件样式打包后不显示&#xff0c;升级前uview 组件是可以正常显示&#xff0c;升级后本地运行是可以正常显示&#xff0c;但是打包发布成H5后uview的组件无法正常显示&#xff0c;其他uniapp自己的组件可以正常显示…

指针笔试题(C语言进阶)

目录 前言 1、案例一 1.1 答案 1.2 解析 2、案例二 2.1 答案 2.2 解析 3、案例三 3.1 答案 3.2 解析 4、案例四 4.1 答案 4.2 解析 5、案例五 5.1 答案 5.2 解析 总结 前言 “纸上得来终觉浅&#xff0c;绝知此事要躬行”。本篇通过对指针实际案例的分析&…

Java基于SpringBoot的校园轻博客系统,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

NLP_构建GPT模型并完成文本生成任务

文章目录 搭建GPT模型&#xff08;解码器&#xff09;构建文本生成任务的数据集训练过程中的自回归文本生成中的自回归&#xff08;贪婪搜索&#xff09;完整代码小结 搭建GPT模型&#xff08;解码器&#xff09; GPT 只使用了 Transformer的解码器部分&#xff0c;其关键组件…

中医笔记(阴阳,五行,十二经脉,天干地支,子午流注,倪海厦中医笔记)

目录 一.阴阳1.1 什么是阴阳&#xff1f;1.2 作用1.3 阴阳理论在中医上的运用 二.五行2.1 五行之间的关系2.2 五行对应的力量2.3 原理&#xff1a; 三.天干地支四.子午流注十二经脉与子午流注之间的关系 五.十二经脉足太阳膀胱经 六.中医笔记小肠是火气化膀胱的水&#xff08;如…

java效率为什么比c/c++慢,蓝桥杯上java只得50分,c++通过?

java效率为什么比c/c慢,蓝桥杯上java只得50分&#xff0c;c通过&#xff1f; 在开始前我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「c的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大…

车载测试,检测项目标准

检测项目&#xff1a; 二.GB/T 31486-2015电动汽车用动力蓄电池电性能要求及试验方法 说明&#xff1a;本标准规定了电动汽车用动力蓄电池(以下简称蓄电池)的 电性能要求、试验方法、检验规则。本标准适用于装载在电动汽车 上的锂离子蓄电池和金属氢化 物镍蓄电池单体和模块&a…

跟着pink老师前端入门教程(JavaScript)-day05

六、语句 &#xff08;一&#xff09;表达式和语句 1、表达式 表达式是可以被求值的代码&#xff0c;JavaScript 引擎会将其计算出一个结果。 2、语句 语句是一段可以执行的代码。 比如&#xff1a; prompt() 可以弹出一个输入框&#xff0c;还有 if语句 for 循环语句等…

创建型设计模式 - 原型设计模式 - JAVA

原型设计模式 一 .简介二. 案例三. 补充知识 前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;神的孩子都在歌唱 一 .简介 原型模式提供了一种机制&#xff0c;可以将原始对象复制到新对象&#xff0…

Vue3_基础使用_3_Hooks模块化

今天主要学习的是hooks, vue3的使用比vue2方便很多了&#xff0c;但是呢各个功能块的逻辑有时候还是会缠绕在一起&#xff0c;这个时候使用hooks进行模块化管理开发&#xff0c;说白了就是将每个单独的业务放到自己的.ts中去写&#xff0c;以后修改就找到这个ts 不用到处去翻…

第三百六十一回

文章目录 1. 概念介绍2. 实现方法2.1 环绕效果2.2 立体效果 3. 示例代码4. 内容总结 我们在上一章回中介绍了"自定义SlideImageSwitch组件"相关的内容&#xff0c;本章回中将介绍两种阴影效果.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在本…

HL小祭記0221

早上很好&#xff0c;浑身酸疼&#xff0c;像被人*了 上午将字符串 一言难尽 中午天有点小雨 炸金花 额 潇寞手麻了&#xff0c;好快啊&#xff01; 靠开牌小赚一下 下午调题 动不动就一百行代码…… 小雨&#xff0c;中雨&#xff0c;大雨&#xff0c;电闪雷鸣 是不…

代码随想录算法训练营第58天 | 392.判断子序列 115.不同的子序列

判断子序列 这道题可以双指针方法解决。 class Solution { public:bool isSubsequence(string s, string t) {int s_index 0;for(int t_index 0; t_index < t.size(); t_index) {if(s[s_index] t[t_index]) {s_index;}}return s_index s.size();} };用动态规划也是可解…

Shader基础的简单实现(基于URP渲染)

一个模型是很多个顶点组成&#xff0c;顶点数据中包含坐标、法线、切线、UV坐标、顶点颜色等等组成。 URP(Universal Render Pipeline)通用渲染管线&#xff0c;是Unity在2019.3版本之后推出的一种新的渲染管线。传统的渲染管线在渲染多光源的情况&#xff0c;是把每一个主要光…

13款强大的开源API测试工具,不容错过!

使用SOA和微服务作为软件架构的趋势不断上升&#xff0c;催生了多种用于服务API自动化测试的工具。 API是应用程序接口&#xff08;application programming interface&#xff09;的缩写&#xff0c;是一套用于构建和集成应用软件的定义和协议&#xff0c;是两个或多个计算机…