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

news2024/9/25 3:25:24

在这里插入图片描述

源码

<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插件了

在这里插入图片描述

案例

<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" />
    <!--[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">
      <table
        class="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">
          <th
            style="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>
          <th
            style="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.coloradmin.cn/o/2121595.html

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

相关文章

智能风扇的全新升级:NRK3603语音芯片识别控制模块的应用

在当今智能化生活的潮流中&#xff0c;如何让家电更加人性化、便捷化&#xff0c;已经成为消费者和制造商关注的焦点。在这股大潮中&#xff0c;NRK3603语音识别模块以其出色的性能和广泛的应用&#xff0c;为智能电风扇带来了全新的升级。 1. 芯片特性 NRK3603是一款高性能、…

ADTEC自动阻抗匹配器维修AMVG-2000-FY AMVG-1000-CD

提供全系列ADTEC自动阻抗匹配器维修&#xff0c;射频电源维修。 ADTEC自动阻抗匹配网络可以实现高速自动整合&#xff0c;该系列设备装备了可以通过个人电脑操作和测量的AMV软件&#xff0c;设备内置了用于预设和LC网络的标准库&#xff0c;还可以根据客户要求进行定制&#x…

高颜值官网(1):百货类网站UI,拓展一下你的眼界。

Hi、我是大千UI工场&#xff0c;本期开始每次分享8-10个各行业的大气颜值官网&#xff0c;欢迎关注我&#xff0c;以便及时收到更新消息&#xff0c;我是10年UI和前端领域老司机了&#xff0c;一定不负所望。

代码随想录 - 1 - 数组 - 二分查找

代码随想录&#xff1a;代码随想录 一.数组理论基础 数组是存放在连续内存空间上的相同类型数据的集合 数组可以方便的通过下标索引的方式获取到下标对应的数据 需要注意&#xff1a; 数组下标都是从0开始的数组内存空间的地址是连续的正是因为数组在内存空间的地址是连续的&…

post请求中有[]报400异常

序言 在和前端同学联调的时候&#xff0c;发现只要post请求参数里面有[]&#xff0c;就会报400的错误 可以看到日志中&#xff1a; The valid characters are defined in RFC 7230 and RFC 3986 解决办法&#xff1a; 参考了博客&#xff1a; spring boot 中解决post请求中有…

企业如何进行社媒聆听?需要关注哪些维度?

企业进行社媒聆听&#xff0c;简单来说就是关注企业在抖音、小红书、微信等社交媒体平台的品牌、竞品被提及情况。用以帮助企业洞悉客户与市场&#xff0c;调整营销节奏。要做好社媒聆听&#xff0c;主要从以下几个方面入手&#xff1a; 一、监测内容-了解品牌声量趋势 设定品…

在centos上搭建syslog服务端

在CentOS上搭建一个syslog服务器&#xff0c;可以使用rsyslog服务 安装rsyslog&#xff1a; sudo yum install rsyslog编辑配置文件 /etc/rsyslog.conf&#xff0c;确保以下设置&#xff1a; 确保服务器监听在UDP 514端口上&#xff1a; $ModLoad imudp $UDPServerRun 514禁…

【高中物理】用代码缩写胡克定律公式原理图

用代码缩写胡克定律公式原理图 代码实现了以下功能&#xff1a; 交互式滑块&#xff1a;用户可以通过滑块调整弹簧的弹性系数&#xff08;k&#xff09;、拉力大小&#xff08;F&#xff09;和弹簧的原长&#xff08;l0&#xff09;&#xff0c;实时观察弹簧的伸长和受力变化。…

消费零售行业如何实现数智化转型?从四个阶段循序渐进

随着信息技术的迅猛进步&#xff0c;企业纷纷踏上数字化转型的征途&#xff0c;而数字化仅是实现数智化的起点。数智化&#xff0c;核心在于数据智能化&#xff0c;它强调企业运用数字化技术汇聚并分析数据&#xff0c;以数据为引擎推动决策优化与创新发展。在消费零售领域&…

RiverPod以及Hook

RiverPod 导入和基础等查看官方文档 import package:hooks_riverpod/hooks_riverpod.dart;final normalProvider Provider<String>((ref) {return "this is normalProvider"; }); final stateProvider StateProvider.autoDispose((ref) {return "this …

Docker:对已有的容器,对当前容器映射的端口实时增删改查

首先我的docker已经起了一个容器&#xff0c;我突然想把他的80->80映射的端口改成80->8080 但是我不想去新启动容器&#xff0c;想在现有容器基础上去修改&#xff0c;或者我想删除某个端口映射&#xff08;只是大概思路&#xff09; 如何寻找容器配置文件位置 首先我这…

SpringBoot大学生租房平台:技术实现与市场分析

第2章 开发环境与技术 大学生租房平台的编码实现需要搭建一定的环境和使用相应的技术&#xff0c;接下来的内容就是对大学生租房平台用到的技术和工具进行介绍。 2.1 MYSQL数据库 本课题所开发的应用程序在数据操作方面是不可预知的&#xff0c;是经常变动的&#xff0c;没有办…

使用LDAP登录GitLab

使用LDAP登录GitLab gitlab.rb 配置如下 gitlab_rails[ldap_enabled] true #gitlab_rails[prevent_ldap_sign_in] false###! **remember to close this block with EOS below** gitlab_rails[ldap_servers] YAML.load <<-EOSmain:label: LDAPhost: 172.16.10.180port:…

FAT32文件系统详细分析 (格式化SD nandSD卡)

FAT32 文件系统详细分析 (格式化 SD nand/SD 卡) 目录 FAT32 文件系统详细分析 (格式化 SD nand/SD 卡)1. 前言2.格式化 SD nand/SD 卡3.FAT32 文件系统分析3.1 保留区分析3.1.1 BPB(BIOS Parameter Block) 及 BS 区分析3.1.2 FSInfo 结构扇区分析3.1.3 引导扇区剩余扇区3.1.4 …

程序员如何写笔记并整理资料?

整理笔记 word。没错&#xff0c;我也看了网上一大堆软件&#xff0c;还有git管理等等。个人认为如果笔记只是记录个人的经验积累&#xff0c;一个word就够了&#xff0c;那些notepad&#xff0c;laTex个人觉得不够简练。word。 1.word可以插入任何文件附件(目前最大的word 20…

python简单处理nmap的扫描结果

0x00 前言 当我们使用nmap扫描大量目标的时候&#xff0c;会使用nmap 扫描大量的IP后&#xff0c;会使用nmap对扫描结果进行输出保存&#xff0c;例如-oX 保存为xml文件&#xff0c;但是我们经常使用的是excel表格进行分发结果到各个负责人。 0x01设计 我们可能使用不同时间的…

稳健外汇盈利:掌握关键风险管理技巧

在复杂多变的市场中&#xff0c;机遇与风险是并存的&#xff0c;往往一念之差便能决定财富的沉浮。因此&#xff0c;每位交易员都需要对市场心存敬畏&#xff0c;深刻理解并实践风险控制的重要性&#xff0c;以免被市场的巨浪吞噬。正如投资大师巴菲特所言&#xff1a;“投资法…

Docker常用操作(基础篇)

Docker常用操作一览图 #查看镜像 docker images #拉取nginx镜像 docker pull nginx #拉取mysql镜像 docker pull mysql docker run -d --name nginx1 -p 80:80 nginx #docker run -d&#xff1a;创建并运行一个容器&#xff0c;-d是让容器以后台进程运行 #--name nginx1&#…

【Python基础】Python中的pip命令安装与使用

前言 对于一些新手来说&#xff0c;如何安装和使用pip命令可能会有些困惑。本文将详细介绍pip命令的安装和使用方法&#xff0c;帮助读者轻松上手pip&#xff0c;让你在Python编程旅程中更加自如。 一、pip简介 pip是Python的包管理工具&#xff0c;全称是“pip installs pac…

TikTok和Instagram各自不同的广告形式,该选定哪个平台?

近年来&#xff0c;TikTok凭借其短视频和创新功能吸引了大量年轻用户&#xff0c;并在广告方面推出了挑战赛、创意滤镜和名人合作等多种形式&#xff0c;自2019年起迅速崛起&#xff0c;成为Instagram的有力竞争者&#xff0c;连续三年在下载量上名列前茅。而Instagram则拥有超…