前端用html写excel文件直接打开

在这里插入图片描述

源码

<html 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 charset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>Sheet1</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
</head>
<body><table border="1"><tr><th>Header1</th><th>Header2</th><th>Header3</th></tr><tr><td>Data1</td><td style="width: 250px; height: 40px;"><img src="https://mmbiz.qpic.cn/sz_mmbiz_gif/BAhkmRPsSTRHJGSnTtkS8na0jjlkCIfbeZic9c56FXFZHvrPFKZE0zq4yKoZ14rLIuFmhmZst1Sm0l91P3IaTVA/640" width="80" height="40"  /><img src="https://mmbiz.qpic.cn/sz_mmbiz_gif/BAhkmRPsSTRHJGSnTtkS8na0jjlkCIfb16LNfFOec8WPgFia7iclSicQ5XibsK8ohCDGnHvHDHJLfe3BhMNfpvK6Sw/640" width="80;" height="40"  /><img src="https://mmbiz.qpic.cn/sz_mmbiz_gif/BAhkmRPsSTRHJGSnTtkS8na0jjlkCIfbXp1u0trKptUrj141tvFje1VO2FSwY47d2icJ4oKgZfnickFlLZfF0RYA/640" width="80" height="40"  /></td><td>Data3</td></tr></table>
</body>
</html>

讲解

.html文件直接用excel能打开就因为:

<!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>Sheet1</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml>
<![endif]-->

其中<!--[if gte mso 9]>就是声明 Microsoft Office 的 Excel 软件可读的。金山的WPS有点不太友好,金山的WPS和Microsoft Office 的 Excel 有点差异

生成

前端想生成excel文件可以直接封装html组件了,改成 .xls 后缀名即可。可以不用js插件了

在这里插入图片描述

案例

<htmlxmlns: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" /><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name> </x:Name><x:WorksheetOptions><x:Selected /></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--><style type="text/css">.td {width: 84px;}.gdtjContainer .tb tr {text-align: center;vertical-align: middle;}.gdtjContainer .tb th {border-left: 0.5pt solid #000;border-bottom: 0.5pt solid #000;text-align: center;font-weight: normal;font-size: 10pt;height: 30px;}.gdtjContainer .header th {font-size: 12pt;}.gdtjContainer .tb tr th.noleftborder {border-left: none;}.gdtjContainer .tb tr th.rightborder {border-right: 0.5pt solid #000;}</style></head><body><div class="gdtjContainer"><tableclass="tb"cellspacing="0"cellpadding="0"border="0"width="2184px"><colgroup><col class="td" /><col class="td" /><col class="td" /><col class="td" /><col class="td" /><col class="td" /><col class="td" /><col class="td" /><col class="td" /><col class="td" /><col class="td" /><col class="td" /><col class="td" /><col class="td" /><col class="td" /><col class="td" /><col class="td" /><col class="td" /><col class="td" /><col class="td" /><col class="td" /><col class="td" /><col class="td" /><col class="td" /><col class="td" /><col class="td" /></colgroup><tr style="height: 40px"><thstyle="font-size: 20pt; font-family: 宋体; border: none"colspan="26">2011年增城市单位土地使用权出让情况登记表(统计时间从2011-06-29至2011-06-30)</th></tr><tr><th colspan="23" style="border-left: none"> </th><thstyle="text-align: left; font-size: 12pt; border-left: none"colspan="3">单位:万元、平方米</th></tr><tr class="header"><th rowspan="2">合同编号</th><th colspan="2" rowspan="2">用地单位</th><th colspan="2" rowspan="2">土地座落</th><th rowspan="2">供地面积</th><th style="border-left: none"> </th><th> </th><th rowspan="2">用途</th><th colspan="3" rowspan="1">出让金</th><th rowspan="2">容积率</th><th rowspan="2">建筑密度</th><th rowspan="2">绿地率</th><th rowspan="2">规划建筑面积</th><th rowspan="2">出让方式</th><th rowspan="2">审批日期</th><th rowspan="2">合同签订日期</th><th rowspan="2">动工期限</th><th rowspan="2">竣工日期</th><th rowspan="2">批次情况</th><th rowspan="2">合同约定缴费期限</th><th rowspan="2">缴费情况</th><th rowspan="2">滞纳金</th><th rowspan="2" class="rightborder">备注</th></tr><tr style="height: 40px" class="header"><th>新增面积</th><th style="font-size: 10pt">保障性住房用地占用面积</th><th>应缴</th><th>已缴</th><th>未缴</th></tr><tr><th>440183-2011-</th><th colspan="2">45654</th><th colspan="2"> </th><th>1110000</th><th> </th><th> </th><th> </th><th>111</th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th>拍卖出让</th><th> </th><th>2011-06-29</th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th class="rightborder"> </th></tr><tr><th> </th><th colspan="2">合计</th><th colspan="2"> </th><th>1110000</th><th> </th><th> </th><th> </th><th>111</th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th> </th><th class="rightborder"> </th></tr></table></div></body>
</html>

在这里插入图片描述

在这里插入图片描述

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

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

相关文章

打架监测识别摄像机

打架监测识别摄像机 是一种用于监控和识别打架行为的智能监控设备。这种摄像机利用先进的人工智能和计算机视觉技术&#xff0c;能够准确识别出监控画面中发生的打架事件&#xff0c;从而及时采取必要的应对措施。 打架监测识别摄像机的工作原理是通过对监控画面的实时分析和识…

YOLOv8 人体姿态估计动作识别关键点检测(代码+教程)

YOLOv8 人体姿态判断 项目介绍 YOLOv8 人体姿态判断 是一个基于最新YOLOv8模型的深度学习项目&#xff0c;旨在识别和分析人体姿态。该项目利用先进的计算机视觉技术和深度学习框架&#xff0c;通过摄像头捕捉实时图像或处理存储图像&#xff0c;识别人体的关键点&#xff0c…

大语言模型如何助力药物开发? 哈佛George Church Lab最新综述

大语言模型因其展现出类人般的推理、工具使用和问题解决能力而备受瞩目&#xff0c;此外&#xff0c;它在化学、生物学等专业领域也展现出深厚的理解能力&#xff0c;进一步提升了其应用价值。本文阐述大语言模型可以在理解疾病机制、药物发现和临床试验三个药物发现的基本阶段…

【西电电装实习】5. 无人机模块及作用、上位机的操作

文章目录 前言一、硬件结构电源、电源电压测试电路晶振外围陀螺仪信号放大电路及天线空心杯&#xff08;电极&#xff09;驱动电路 软件设置整机装配PID 参数设置公式 参考文献 前言 西电电装实习&#xff0c;无人机原理图、上位机的调节方法 一、硬件结构 电源、电源电压测…

UEFI学习笔记(二):edk2构建编译流程

UEFI入门&#xff08;二&#xff09;&#xff1a;edk2项目编译流程 一、Build流程框架Build的三个阶段&#xff1a;1、Autogen2、Make3、ImageGen 二、编译构建步骤&#xff1a;1. 安装依赖工具2. 初始化构建环境3. 配置工具链和目标4. 定义平台配置5. 构建并编译 三、uefi-too…

C++面试3

一、常用设计模式 https://blog.csdn.net/m0_71530237/article/details/141140118?spm1001.2014.3001.5501 二、死锁以及解决方式&#xff1f; 死锁&#xff1a;一种常见的并发问题&#xff0c;发生在多个进程或线程因为竞争资源而陷入相互等待的状态&#xff0c;导致这些进…

【运维监控】Prometheus+grafana监控flink运行情况

运维监控系列文章入口&#xff1a;【运维监控】系列文章汇总索引 文章目录 一、prometheus二、grafana三、flink配置修改四、prometheus集成grafana监控flink1、修改prometheus配置文件2、导入grafana模板3、验证 本示例通过flink自带的监控信息暴露出来&#xff0c;然后将数据…

提权——Linux

一、系统漏洞提权 #kali的nmap命令 nmap -O 目标ip 通过当前系统的内核版本搜索当前系统的漏洞&#xff0c;进行利用 搜索漏洞 对linux系统的漏洞进行利用&#xff08;脏牛、脏管道等&#xff09; 利用漏洞搜索工具&#xff0c;搜索当前系统是否存在一些漏洞 linux-exp…

人工智能学习

&#x1f310;前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。 &#x1f449;【点击跳转到网站&#xff1a;人工智能教程】 什么是人工智能&#xff1f;通俗来讲&#xff0c;就是让机器能像人一样思考。这…

vue3 5个常用的API

Vue3之于Vue2最大的变化&#xff0c;当属composition API了&#xff0c;而除了引入composition API外&#xff0c;一些我们在Vue2上经常使用的东西到了Vue3时也发生了不小的变化&#xff0c;本文将介绍一些有Vue2到Vue3中几个比较重要且常用的知识点。 Options API与Compositio…

世界主要国家跨境数据流动的政策法规及其启示

文章目录 前言一、主要国家加强跨境数据流动的监管措施二、全球跨境数据流动的关键问题三、中国跨境数据流动治理的不足与对策前言 随着数据成为全球经济发展的战略资源,各国政府正积极构建安全有效的治理体系,以扩大数据的社会和经济效益,探讨世界主要国家跨境数据流动的政…

3D云渲染农场为何怎么贵?主要消耗成本介绍

随着对高质量3D动画的需求持续增长&#xff0c;云渲染农场对于旨在以高效速度生产高质量视觉效果的工作室来说变得至关重要。然而&#xff0c;用户经常想知道为什么渲染农场的价格如此之高&#xff0c;理解背后的原因可以帮助艺术家做出更好的选择。 什么是云渲染农场&#xff…

基于Spring Boot的能源管理系统+建筑能耗+建筑能耗监测系统+节能监测系统+能耗监测+建筑能耗监测

建筑能耗数据采集器是一种采用嵌入式微计算机系统的建筑能耗数据采集专用装置&#xff0c;具有数据采集、数据处理、数据 存储、数据传输以及现场设备运行状态监控和故障诊断等功能。 下行具有2路RS485接口、2路RS485/RS232复用接口、1路MBUS接口&#xff0c;支持DL/T645、Modb…

深度学习经典模型之T5

T5(Text-to-Text Transfer Transformer) 是继BERT之后Google的又外力作&#xff0c;它是一个文本到文本迁移的基于Transformer的NLP模型&#xff0c;通过将 所有任务统一视为一个输入文本并输出到文本(Text-to-Text)中&#xff0c;即将任务嵌入在输入文本中&#xff0c;用文本的…

机器学习(西瓜书)第 4 章 决策树

4.1 决策树基本流程 决策树模型 基本流程 在第⑵种情形下&#xff0c;我们把当前结点标记为叶结点&#xff0c;并将其类别设定为该结点所含样本最多的类别&#xff1b;在第⑶种情形下&#xff0c;同样把当前结点标记为叶结点&#xff0c;但将其类别设定为其父结点所含样本最多…

Maven私服Nexus安装及使用

前言 周末在家闲着无聊&#xff0c;不知道做点啥&#xff0c;就想着自己搭建一个Maven私服来玩玩。刚好使用自己之前在电脑上搭建的虚拟机服务器来操作体验了一把。搭建好私服后&#xff0c;以后自己写的一些小模块啊&#xff0c;工具包啥的就可以发布到自己的私服上了&#xf…

2024网络安全人才实战能力白皮书安全测试评估篇

9月10日&#xff0c;国内首个聚焦“安全测试评估”的白皮书——《网络安全人才实战能力白皮书-安全测试评估篇》&#xff08;以下简称“白皮书”&#xff09;在国家网络安全宣传周正式发布。 作为《网络安全人才实战能力白皮书》的第三篇章&#xff0c;本次白皮书聚焦“安全测…

上海市高等学校信息技术水平考试 C程序设计(2020D场)全解

C语言程序一定是从mian函数开始的&#xff1b;在主函数中&#xff0c;一次又一次调用了其他函数&#xff0c;但不代表程序是在代码行的最后一个函数结束&#xff1b;而是在主函数中&#xff0c;遇到了return 0 才会程序结束。 标识符&#xff1a;在编程语言中&#xff0c;标识符…

Ubuntu下安装最新版本Apache2文件服务器

文章目录 1.最新版本Apache2安装2. Apache2配置2.1 端口配置2.2 创建软连接,生成文件服务2.3 隐藏Apache2服务版本号2.4 添加用户&#xff0c;设置Apache2文件服务密码2.5 重启Apache2服务 3. 执行后效果 1.最新版本Apache2安装 注意&#xff1a;安装最新版本必须升级Ubuntu为2…

【鸿蒙】HarmonyOS NEXT星河入门到实战6-组件化开发-样式结构重用常见组件

目录 1、Swiper轮播组件 1.1 Swiper基本用法 1.2 Swiper的常见属性 1.3 Swiper的样式自定义 1.3.1 基本语法 1.3.2 案例小米有品 2、样式&结构重用 2.1 Extend:扩展组件(样式、事件) 2.2 Styles:抽取通用属性、事件 2.3 Builder:自定义构建函数(结构、样式、事…