当前位置：首页 > news >正文

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

news 2025/9/19 3:15:40

在这里插入图片描述

源码

<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>

在这里插入图片描述

前端用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]&…...

编程日记 2024/9/17 20:15:48

FastText 和 Faiss 的初探了解

概览大模型目前已经是如火如荼的程度，各个大厂都有推出面向大众的基础大模型，同时诸多行业也有在训练专有大模型，而大模型的发展由来却是经过多年从文本检索生成、深度学习、自然语言处理，在Transformer架构出来后，才…...

编程日记 2024/9/17 20:14:47

微服务保护学习笔记(五)Sentinel授权规则、获取origin、自定义异常结果、规则持久化

文章目录前言4 授权规则4.1 基本原理4.2 获取origin4.3 配置授权规则 5 自定义异常结果6 规则持久化前言微服务保护学习笔记(一)雪崩问题及解决方案、Sentinel介绍与安装微服务保护学习笔记(二)簇点链路、流控操作、流控模式(关联、链路) 微服务保护学习笔记(三)流控效果(…...

编程日记 2024/9/17 20:12:45

YOLOv8目标检测模型——遥感小目标检测经验分享

小目标检测——YOLOV8 一、引言背景介绍 （1）目标检测的重要性目标检测在许多领域都具有极其重要的作用。在自动驾驶中，目标检测能够识别道路上的障碍物和行人，确保行车安全。在视频监控中，目标检测能够实时发现异…...

编程日记 2024/9/17 20:10:43

构建响应式 Web 应用：Vue.js 基础指南

构建响应式 Web 应用：Vue.js 基础指南一 . Vue 的介绍1.1 介绍1.2 好处1.3 特点二 . Vue 的快速入门2.1 案例 1 : 快速搭建 Vue 的运行环境 , 在 div 视图中获取 Vue 中的数据2.2 案例 2 : 点击按钮执行 vue 中的函数输出 vue 中 data 的数据2.3 小结三 . Vue 常…...

编程日记 2024/9/17 20:00:57

计算机毕业设计选题推荐-在线投票系统-Java/Python项目实战

✨作者主页：IT研究室✨ 个人简介：曾从事计算机专业培训教学，擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…...

编程日记 2024/9/17 19:59:53

【C/C++】程序的构建（编译）过程概述

🦄个人主页:小米里的大麦-CSDN博客 🎏所属专栏:C_小米里的大麦的博客-CSDN博客 🎁代码托管:C: 探索C编程精髓，打造高效代码仓库 (gitee.com) ⚙️操作环境:Visual Studio 2022 目录一、前言二、预处理（Preprocessi…...

编程日记 2024/9/17 19:58:51

ElasticSearch-2-核心语法集群高可用实战-Week2

ES批量操作 1.批量获取文档数据这里多个文档是指，批量操作多个文档，搜索查询文档将在之后的章节讲解批量获取文档数据是通过_mget的API来实现的 (1)在URL中不指定index和type 请求方式：GET 请求地址：_mget 功能说明 &#…...

编程日记 2024/9/17 19:57:50

STM的CAN通信学习

显性电平：0 隐性电平：1 一、帧结构 1.帧类型 1）数据帧：发送设备主动发送数据（广播式） 2）请求帧：接收设备主动请求数据（请求式） 2.帧结构 1&#xff…...

编程日记 2024/9/17 19:55:48

【高等数学学习记录】函数

【高等数学&学习记录】函数从事测绘工作多年，深刻感受到基础知识的重要及自身在这方面的短板。为此，打算重温测绘工作所需基础知识。练好基本功，为测绘工作赋能。 1 知识点 1.1 函数设数集 D ⊂ R D\subset R D⊂R，称映射…...

编程日记 2024/9/17 19:54:46

【springboot过ingress后无法获取X-Forwarded-For头信息】

springboot过ingress后无法获取X-Forwarded-For头信息一、现象结论修改步骤ingressspringboot 排查流程本文参考一、现象项目使用spring boot 2.7.18，有个新需求是校验X-Forwarded-For头的所有来源ip合法性，线上环境出现取不到X-Forwarded-For头的问…...

编程日记 2024/9/17 19:53:42

表格标记＜table＞

一.表格标记、 1table：表格标记 2.caption:表单标题标记 3.tr:表格行标记 4.td:表格中数据单元格标记 5.th:标题单元格 table标记是表格中最外层标记，tr表示表格中的行标记，一对<tr>表示表格中的一行，在<tr>中可…...

编程日记 2024/9/17 19:51:39

Rust练手项目，写个有趣的小工具定时从一言网获取一段有趣的话并推送通知

Rust练手项目，写个有趣的小工具代码继续练习Rust, 写个小工具定时从一言网获取一段有趣的话并提示，如下练习以下Rust点并发编程 Mutex, Arc指针使用HTTP请求Windows Gui 代码 Cargo.toml [package] name "funny_word" edition "20…...

编程日记 2024/9/17 19:49:37

【隐私计算】Paillier半同态加密算法

一、何为同态加密（HE）？ HE是一种特殊的加密方法，它允许直接对加密数据执行计算，如加法和乘法，而计算过程不会泄露原文的任何信息。计算的结果仍然是加密的，拥有密钥的用户对处理过的密文数据进…...

编程日记 2024/9/17 19:46:34

判断数字的奇偶[中秋快乐~]

题目描述给定一个整数 n,编写程序判断数字 n 是奇数还是偶数，是奇数则输出 “odd”，偶数则输出 “even”。输入格式一行，一个整数 n。输出格式一行，如果 n 是奇数则输出 “odd”; 如果 nn 是偶数则输出 “even”。样例…...

编程日记 2024/9/17 19:44:31

文件操作及重定向详解

1、linux下一切皆文件：在linux中，一切皆文件是一个重要的概念，用于描述linux操作系统中所有资源和设备都以文件的形式进行访问和处理。这个概念可以理解为，无论是硬盘上的文件、网卡、设备、进程等，都被抽象为文件的形式存在。在linux系统中，通…...

编程日记 2024/9/17 19:43:30

鸿蒙next json解析 ArkUI 带你玩转 arkts json解析

前言导读相信很多同学再开发过程中都会遇到json解析的处理，不管是跟服务端交互或者是读取本地的json 都会遇到json解析那么正好今天有空正好讲一下鸿蒙next里面的json解析 JSON解析与生成本模块提供了将JSON文本转换为JSON对应对象或值，以及将对象…...

编程日记 2024/9/17 19:41:28

东土科技加码芯片业务投资，携手神经元共建新型工业生态

为抢抓国产化芯片发展的重大机遇，东土科技决定进一步加大对神经元信息技术（成都）有限公司的投资。这一战略布局有利于东土科技鸿道Intewell工业操作系统与神经元公司芯片的深度协同，推动实现“信息技术、网络技术、控制技术、数字…...

编程日记 2024/9/17 19:40:27

指纹与指甲检测系统源码分享

指纹与指甲检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer V…...

编程日记 2024/9/17 19:39:25

C++3D迷宫

目录开头程序程序的流程图程序游玩的效果下一篇博客要说的东西开头大家好，我叫这是我58。程序 #include <iostream> using namespace std; void printmaze(char strmaze[5][5][5]) {cout << "-----" << endl;int i 0;int ia 0…...

编程日记 2024/9/17 19:38:24

铭豹扩展坞 USB转网口突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因：背景：一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2025/9/17 11:41:11

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向深度学习与微纳光子学的结合主要集中在以下几个方向： 逆向设计通过神经网络快速预测微纳结构的光学响应，替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。特征提取与优化从复杂的光学数据中自…...

编程新知 2025/9/19 2:49:47

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 （1）连接查询（JOIN） 内连接（INNER JOIN）：返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/7/12 7:16:15

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优）核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...

编程新知 2025/9/18 10:40:50

工业安全零事故的智能守护者：一体化AI智能安防平台

前言： 通过AI视觉技术，为船厂提供全面的安全监控解决方案，涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面，能够实现对应负责人反馈机制，并最终实现数据的统计报表。提升船厂…...

编程新知 2025/9/18 20:09:32

汽车生产虚拟实训中的技能提升与生产优化

在制造业蓬勃发展的大背景下，虚拟教学实训宛如一颗璀璨的新星，正发挥着不可或缺且日益凸显的关键作用，源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例，汽车生产线上各类…...

编程新知 2025/9/11 12:54:58

Python爬虫（一）：爬虫伪装

一、网站防爬机制概述在当今互联网环境中，具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类： 身份验证机制：直接将未经授权的爬虫阻挡在外反爬技术体系：通过各种技术手段增加爬虫获取数据的难度…...

编程新知 2025/8/24 22:20:35

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到跨域请求接口的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。什么是代理（proxy）？代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/9/13 13:10:12

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户或 sudo 权限执行！ sudo su - 1. CentOS 系统： yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

编程新知 2025/8/24 22:00:49

在 Spring Boot 中使用 JSP

jsp？ 好多年没用了。重新整一下还费了点时间，记录一下。项目结构： pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...

编程新知 2025/9/7 8:49:20

源码

讲解

生成

案例

相关文章：