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

news2024/9/22 22:27:19

前言

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

道本合规管理|| 欧盟对苹果公司的重罚与合规警示

近日&#xff0c;外媒广泛报道了欧盟委员会预计将对美国科技巨头苹果公司开出约5亿欧元的罚单。这一决定源于苹果公司在音乐流媒体服务领域的反竞争行为&#xff0c;违反了欧盟严格的反垄断法规。这一事件不仅揭示了企业在全球化经营中面临的合规挑战&#xff0c;也为我们提供了…

解决app中以webview的方式嵌入h5网页,h5网页加载不出来

问题描述&#xff1a;我的h5网页在web端和手机浏览器都能正常渲染展示&#xff0c;但是嵌入到客户的webview中&#xff0c;渲染加载不出来&#xff0c;仔细检查代码之后并没有任何代码错误和后台报错。抓耳挠腮查找两天之后发现&#xff0c;原因为整个h5网页的最外层高度设置成…

ProtoBuf认识与Windows下的安装

protobuf简介 Protobuf 是 Protocol Buffers 的简称&#xff0c;它是 Google 公司开发的一种数据描述语言&#xff0c;是一种轻便高效的结 构化数据存储格式&#xff0c;可以用于结构化数据&#xff0c;或者说序列化。它很适合做数据存储 或 RPC 数据交换格 式 。可用于通讯…

【springblade】springblade(bladeX) 数据权限失效原因分析

文章目录 数据权限接口权限 前言&#xff1a;最近博主在按照bladeX官方文档 配置数据权限 结果发现失效了&#xff0c;网上搜了一下没找到合适的答案&#xff0c;本着求人不如求己的精神&#xff0c;自己调试了一下发现了问题所在&#xff0c;也大致看了一下bladeX的权限逻辑。…

STM32G030C8T6:定时器1ms中断(以64MHz外部晶振为例)

本专栏记录STM32开发各个功能的详细过程&#xff0c;方便自己后续查看&#xff0c;当然也供正在入门STM32单片机的兄弟们参考&#xff1b; 本小节的目标是&#xff0c;系统主频64 MHZ,采用高速外部晶振&#xff0c;通过定时器3 每秒中断控制 PB9 引脚输出高低电平&#xff0c;从…

CPEOS:国家遥感数据与应用服务平台

文章目录 Main高分数据线上展厅遥感卫星技术成果支撑单位 Main 主页&#xff1a;https://www.cpeos.org.cn/home/ 高分数据 线上展厅 遥感卫星 技术成果 支撑单位

十九、图像的放缩和插值

项目功能实现&#xff1a;对一张图像进行放大和缩小操作 按照之前的博文结构来&#xff0c;这里就不在赘述了 一、头文件 resizing.h #pragma once#include<opencv2/opencv.hpp>using namespace cv;class RESIZING { public:void resizing(Mat& image); };#pragma…

Spring 类型转换、数值绑定与验证(一)— DataBinder

DataBinder 是Spring用于数据绑定、类型转换及验证的类。使用场景有&#xff1a;1&#xff09;xml配置文件定义bean,Spring 内部使用DataBinder 来完成属性的绑定&#xff1b;2&#xff09;Web请求参数绑定&#xff0c;在Spring MVC 中&#xff0c;Controller的方法参数通常会自…

【Git】Git命令的学习与总结

本文实践于 Learn Git Branching 这个有趣的 Git 学习网站。在该网站&#xff0c;可以使用 show command 命令展示所有可用命令。你也可以直接访问网站的sandbox&#xff0c;自由发挥。 一、本地篇 基础篇 git commit git commit将暂存区&#xff08;staging area&#xff…

leetcode:1925. 统计平方和三元组的数目(python3解法)

难度&#xff1a;简单 一个 平方和三元组 (a,b,c) 指的是满足 a2 b2 c2 的 整数 三元组 a&#xff0c;b 和 c 。 给你一个整数 n &#xff0c;请你返回满足 1 < a, b, c < n 的 平方和三元组 的数目。 示例 1&#xff1a; 输入&#xff1a;n 5 输出&#xff1a;2 解释…

企业如何高效地使用数字工厂管理系统

随着信息技术的飞速发展&#xff0c;数字工厂管理系统已经成为现代企业提升生产效率、优化资源配置、增强竞争力的关键工具。本文将探讨企业如何高效地使用数字工厂管理系统&#xff0c;以实现生产流程的优化、成本控制的精细化和市场响应的敏捷化。 一、数字工厂管理系统的概念…

Autosar-Mcal配置详解-GPT

3.3.1添加GPT模块 方法与添加Dio相似&#xff0c;可参加Dio模块添加方法。 3.3.2 创建、配置GPT通道 1)根据需求创建GPT通道&#xff08;即创建几个定时器&#xff09; 本例中创建了3个定时器通道&#xff1a;1ms&#xff0c;100us&#xff0c;OsTimer。 2)配置GPT通道 配置T…

Android LruCache源码分析

文章目录 Android LruCache源码分析概述LruCache和LinkedHashMap关系源码分析写入数据读取数据删除缓存 Android LruCache源码分析 概述 LruCache&#xff08;Least Recently Used Cache&#xff0c;最近最少使用缓存&#xff09;是 Android 中的一种缓存机制。 根据数据的使…

从大厂裸辞后成为自由职业者,一年后我怎么样了?

深耕技术领域7年&#xff0c;前前后后也做过不少副业&#xff0c;最近我一直在思考什么副业才是对自己有价值的&#xff0c;可持续的&#xff0c;甚至是可增长的。 22年我所在团队的一个项目解散了&#xff0c;领导问我想拿钱走还是转岗&#xff0c;想想自己也在这个公司干了5…

2024-02-21 学习笔记(DETR)

自动多模态检测验证效果不佳&#xff08;过检太多&#xff09;后&#xff0c;节后开始尝试DETR路线。 基本梳理了下DETR发展和验证的脉络&#xff0c;先进行相应指定场景的效果验证。 关于DETR系列的介绍&#xff0c;B站上比较多&#xff0c;迪哥的都讲的比较细。 推荐大佬的…

【VSCode编写JavaScript】

VSCode编写JavaScript ■ 下载安装VSCode■ VSCode统一配置■ 格式化工具■ Tab size &#xff08;代码缩进 2个字符&#xff09;![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/7b79c59636f147c8b08a0fff37886e0a.png) ■ VSCode安装JS插件■ VSCode新建JS工程代码…

突发!AI独角兽「竹间智能」被曝停工停产6个月

大家好我是二狗。 今天早上起来刷朋友圈&#xff0c;看到一张截图——AI创企竹间智能&#xff0c;宣称因为公司所处的经营环境艰难&#xff0c;部分部门和岗位将从即日起停工停产6个月。 图源&#xff1a;&#xff08;企服科学&#xff09; 下面是文字版&#xff1a; 由于公司…

Pregnostic®–PE IIp ELISA,用于测量人源ESM-1水平

Pregnostic PE Pregnostic是由IQ Products公司开发的重点关注女性健康的产品线。其中的Pregnostic -PE项目&#xff0c;旨在开发有助于筛查孕期先兆子痫风险的产品&#xff0c;可用于区分早发性和晚发性先兆子痫。 ESM-1 内皮细胞特异性分子&#xff08;ESM-1&#xff09;&am…

渗透测试之文件上传绕过

通过是否抓到包来验证是前端验证还是后端验证&#xff0c;前端验证是不发数据包的&#xff0c;而后端验证是会发数据包的&#xff0c;所以可以通过抓包工具进行判断。再通过不同的验证方式&#xff0c;选择绕过方式。 前端验证&#xff1a;通过禁掉js代码&#xff0c;使验证文…

c++:蓝桥杯的基础算法2(构造,模拟)+练习巩固

目录 构造 构造的基础概念&#xff1a; 模拟 练习1&#xff1a;扫雷 练习2&#xff1a;灌溉 练习3&#xff1a;回文日期 构造 构造的基础概念&#xff1a; 构造算法是一种用于解决特定问题的算法设计方法。在C语言中&#xff0c;构造算法通常涉及到创建一个函数或类来实…