首页 前端知识 前端用html写excel文件直接打开

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

2024-10-17 10:10:41 前端知识 前端哥 60 559 我要收藏

在这里插入图片描述

源码

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

在这里插入图片描述

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19046.html
标签
评论
发布的文章

安装Nodejs后,npm无法使用

2024-11-30 11:11:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!