前端用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>
相关文章：
前端用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]&…...
FastText 和 Faiss 的初探了解
概览 大模型目前已经是如火如荼的程度，各个大厂都有推出面向大众的基础大模型，同时诸多行业也有在训练专有大模型，而大模型的发展由来却是经过多年从文本检索生成、深度学习、自然语言处理，在Transformer架构出来后，才…...
微服务保护学习笔记(五)Sentinel授权规则、获取origin、自定义异常结果、规则持久化
文章目录 前言4 授权规则4.1 基本原理4.2 获取origin4.3 配置授权规则 5 自定义异常结果6 规则持久化 前言 微服务保护学习笔记(一)雪崩问题及解决方案、Sentinel介绍与安装 微服务保护学习笔记(二)簇点链路、流控操作、流控模式(关联、链路) 微服务保护学习笔记(三)流控效果(…...
YOLOv8目标检测模型——遥感小目标检测经验分享
小目标检测——YOLOV8 一、引言 背景介绍 （1）目标检测的重要性 目标检测在许多领域都具有极其重要的作用。在自动驾驶中，目标检测能够识别道路上的障碍物和行人，确保行车安全。在视频监控中，目标检测能够实时发现异…...
构建响应式 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 常…...
计算机毕业设计选题推荐-在线投票系统-Java/Python项目实战
✨作者主页：IT研究室✨ 个人简介：曾从事计算机专业培训教学，擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…...
【C/C++】程序的构建（编译）过程概述
🦄个人主页:小米里的大麦-CSDN博客 🎏所属专栏:C_小米里的大麦的博客-CSDN博客 🎁代码托管:C: 探索C编程精髓，打造高效代码仓库 (gitee.com) ⚙️操作环境:Visual Studio 2022 目录 一、前言 二、预处理（Preprocessi…...
ElasticSearch-2-核心语法集群高可用实战-Week2
ES批量操作 1.批量获取文档数据 这里多个文档是指，批量操作多个文档，搜索查询文档将在之后的章节讲解 批量获取文档数据是通过_mget的API来实现的 (1)在URL中不指定index和type 请求方式：GET 请求地址：_mget 功能说明 &#…...
STM的CAN通信学习
显性电平：0 隐性电平：1 一、帧结构 1.帧类型 1）数据帧：发送设备主动发送数据（广播式） 2）请求帧：接收设备主动请求数据（请求式） 2.帧结构 1ÿ…...
【高等数学学习记录】函数
【高等数学&学习记录】函数 从事测绘工作多年，深刻感受到基础知识的重要及自身在这方面的短板。 为此，打算重温测绘工作所需基础知识。练好基本功，为测绘工作赋能。 1 知识点 1.1 函数 设数集 D ⊂ R D\subset R D⊂R，称映射…...
【springboot过ingress后无法获取X-Forwarded-For头信息】
springboot过ingress后无法获取X-Forwarded-For头信息 一、现象结论修改步骤ingressspringboot 排查流程本文参考 一、现象 项目使用spring boot 2.7.18，有个新需求是校验X-Forwarded-For头的所有来源ip合法性，线上环境出现取不到X-Forwarded-For头的问…...
表格标记＜table＞
一.表格标记、 1table：表格标记 2.caption:表单标题标记 3.tr:表格行标记 4.td:表格中数据单元格标记 5.th:标题单元格 table标记是表格中最外层标记，tr表示表格中的行标记，一对<tr>表示表格中的一行，在<tr>中可…...
Rust练手项目，写个有趣的小工具定时从一言网获取一段有趣的话并推送通知
Rust练手项目，写个有趣的小工具 代码 继续练习Rust, 写个小工具定时从一言网获取一段有趣的话并提示，如下 练习以下Rust点 并发编程 Mutex, Arc指针使用HTTP请求Windows Gui 代码 Cargo.toml [package] name "funny_word" edition "20…...
【隐私计算】Paillier半同态加密算法
一、何为同态加密（HE）？ HE是一种特殊的加密方法，它允许直接对加密数据执行计算，如加法和乘法，而计算过程不会泄露原文的任何信息。计算的结果仍然是加密的，拥有密钥的用户对处理过的密文数据进…...
判断数字的奇偶[中秋快乐~]
题目描述 给定一个整数 n,编写程序判断数字 n 是奇数还是偶数，是奇数则输出 “odd”，偶数则输出 “even”。 输入格式 一行，一个整数 n。 输出格式 一行，如果 n 是奇数则输出 “odd”; 如果 nn 是偶数则输出 “even”。 样例…...
文件操作及重定向详解
1、linux下一切皆文件： 在linux中，一切皆文件是一个重要的概念，用于描述linux操作系统中所有资源和设备都以文件的形式进行访问和处理。 这个概念可以理解为，无论是硬盘上的文件、网卡、设备、进程等，都被抽象为文件的形式存在。在linux系统中，通…...
鸿蒙next json解析 ArkUI 带你玩转 arkts json解析
前言导读 相信很多同学再开发过程中都会遇到json解析的处理，不管是跟服务端交互 或者是读取本地的json 都会遇到json解析 那么正好今天有空正好讲一下鸿蒙next里面的json解析 JSON解析与生成 本模块提供了将JSON文本转换为JSON对应对象或值，以及将对象…...
东土科技加码芯片业务投资，携手神经元共建新型工业生态
为抢抓国产化芯片发展的重大机遇，东土科技决定进一步加大对神经元信息技术（成都）有限公司的投资。这一战略布局有利于东土科技鸿道Intewell工业操作系统与神经元公司芯片的深度协同，推动实现“信息技术、网络技术、控制技术、数字…...
指纹与指甲检测系统源码分享
指纹与指甲检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer V…...
C++3D迷宫
目录 开头程序程序的流程图程序游玩的效果下一篇博客要说的东西 开头 大家好，我叫这是我58。 程序 #include <iostream> using namespace std; void printmaze(char strmaze[5][5][5]) {cout << "-----" << endl;int i 0;int ia 0…...
基于算法竞赛的c++编程（28）结构体的进阶应用
结构体的嵌套与复杂数据组织 在C中，结构体可以嵌套使用，形成更复杂的数据结构。例如，可以通过嵌套结构体描述多层级数据关系： struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...
1688商品列表API与其他数据源的对接思路
将1688商品列表API与其他数据源对接时，需结合业务场景设计数据流转链路，重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点： 一、核心对接场景与目标 商品数据同步 场景：将1688商品信息…...
对WWDC 2025 Keynote 内容的预测
借助我们以往对苹果公司发展路径的深入研究经验，以及大语言模型的分析能力，我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际，我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测，聊作存档。等到明…...
Java多线程实现之Callable接口深度解析
Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...
三体问题详解
从物理学角度，三体问题之所以不稳定，是因为三个天体在万有引力作用下相互作用，形成一个非线性耦合系统。我们可以从牛顿经典力学出发，列出具体的运动方程，并说明为何这个系统本质上是混沌的，无法得到一般解…...
让AI看见世界：MCP协议与服务器的工作原理
让AI看见世界：MCP协议与服务器的工作原理 MCP（Model Context Protocol）是一种创新的通信协议，旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天，MCP正成为连接AI与现实世界的重要桥梁。…...
全志A40i android7.1 调试信息打印串口由uart0改为uart3
一，概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本：2014.07； Kernel版本：Linux-3.10； 二，Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)，并让boo…...
Go语言多线程问题
打印零与奇偶数（leetcode 1116） 方法1：使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...
4. TypeScript 类型推断与类型组合
一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式，自动确定它们的类型。 这一特性减少了显式类型注解的需要，在保持类型安全的同时简化了代码。通过分析上下文和初始值，TypeSc…...
android13 app的触摸问题定位分析流程
一、知识点 一般来说，触摸问题都是app层面出问题，我们可以在ViewRootImpl.java添加log的方式定位；如果是touchableRegion的计算问题，就会相对比较麻烦了，需要通过adb shell dumpsys input > input.log指令，且通过打印堆栈的方式，逐步定位问题，并找到修改方案。 问题…...