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

在这里插入图片描述

源码

<htmlxmlns:o="urn:schemas-microsoft-com:office:office"xmlns:x="urn:schemas-microsoft-com:office:excel"xmlns="http://www.w3.org/TR/REC-html40"><head><metacharset="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><tableborder="1"><tr><th>Header1</th><th>Header2</th><th>Header3</th></tr><tr><td>Data1</td><tdstyle="width: 250px;height: 40px;"><imgsrc="https://mmbiz.qpic.cn/sz_mmbiz_gif/BAhkmRPsSTRHJGSnTtkS8na0jjlkCIfbeZic9c56FXFZHvrPFKZE0zq4yKoZ14rLIuFmhmZst1Sm0l91P3IaTVA/640"width="80"height="40"/><imgsrc="https://mmbiz.qpic.cn/sz_mmbiz_gif/BAhkmRPsSTRHJGSnTtkS8na0jjlkCIfb16LNfFOec8WPgFia7iclSicQ5XibsK8ohCDGnHvHDHJLfe3BhMNfpvK6Sw/640"width="80;"height="40"/><imgsrc="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><metahttp-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]--><styletype="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><divclass="gdtjContainer"><tableclass="tb"cellspacing="0"cellpadding="0"border="0"width="2184px"><colgroup><colclass="td"/><colclass="td"/><colclass="td"/><colclass="td"/><colclass="td"/><colclass="td"/><colclass="td"/><colclass="td"/><colclass="td"/><colclass="td"/><colclass="td"/><colclass="td"/><colclass="td"/><colclass="td"/><colclass="td"/><colclass="td"/><colclass="td"/><colclass="td"/><colclass="td"/><colclass="td"/><colclass="td"/><colclass="td"/><colclass="td"/><colclass="td"/><colclass="td"/><colclass="td"/></colgroup><trstyle="height: 40px"><thstyle="font-size: 20pt;font-family: 宋体;border: none"colspan="26">
            2011年增城市单位土地使用权出让情况登记表（统计时间从2011-06-29至2011-06-30）
          </th></tr><tr><thcolspan="23"style="border-left: none"></th><thstyle="text-align: left;font-size: 12pt;border-left: none"colspan="3">
            单位：万元、平方米
          </th></tr><trclass="header"><throwspan="2">合同编号</th><thcolspan="2"rowspan="2">用地单位</th><thcolspan="2"rowspan="2">土地座落</th><throwspan="2">供地面积</th><thstyle="border-left: none"></th><th></th><throwspan="2">用途</th><thcolspan="3"rowspan="1">出让金</th><throwspan="2">容积率</th><throwspan="2">建筑密度</th><throwspan="2">绿地率</th><throwspan="2">规划建筑面积</th><throwspan="2">出让方式</th><throwspan="2">审批日期</th><throwspan="2">合同签订日期</th><throwspan="2">动工期限</th><throwspan="2">竣工日期</th><throwspan="2">批次情况</th><throwspan="2">合同约定缴费期限</th><throwspan="2">缴费情况</th><throwspan="2">滞纳金</th><throwspan="2"class="rightborder">备注</th></tr><trstyle="height: 40px"class="header"><th>新增面积</th><thstyle="font-size: 10pt">保障性住房用地占用面积</th><th>应缴</th><th>已缴</th><th>未缴</th></tr><tr><th>440183-2011-</th><thcolspan="2">45654</th><thcolspan="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><thclass="rightborder"></th></tr><tr><th></th><thcolspan="2">合计</th><thcolspan="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><thclass="rightborder"></th></tr></table></div></body></html>

在这里插入图片描述

标签： excel

本文转载自: https://blog.csdn.net/qq_42618566/article/details/142097695
版权归原作者 美酒没故事° 所有，如有侵权，请联系我们删除。

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

源码

讲解

生成

案例

发表评论

“前端用html写excel文件直接打开”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航