当前位置:首页 » 《关注互联网》 » 正文

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

22 人参与  2024年10月20日 17:20  分类 : 《关注互联网》  评论

点击全文阅读


在这里插入图片描述

源码

<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://zhangshiyu.com/post/174645.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1