前端导出excel：使用blob实现把网页的html内容导出成一个.xls的文件

这种方式其实就是利用了.xls文件可以解析html文本的功能。本质上还是一个html文件只不过是将.html另存为.xls而已。

element-UI的el-table也可以用这种方式导出。

直接上代码：

<div id="finalSettlementDetail">
   <longterm-final-settlement ref="longterm-final-settlement"></longterm-final-settlement>
</div>

<template #footer>
    <el-button @click="exportFinalSettlementExcel" type="info">导出Excel</el-button>
</template>

这里我们导出子组件longterm-final-settlement的内容。子组件的内容如下：

　　　<table style="border: 0px solid #0094ff;">
        <tr style="border: 0px solid #0094ff;">
          <td colspan="22" style="border: 0px solid #0094ff;text-align: left">制表单位：xxxx</td>
          <td colspan="4" style="border: 0px solid #0094ff;text-align: right">编制时间：{{currentDate}}</td>
        </tr>
      </table>
      <table class="longterm-detail-table">
          <tr>
            <th colspan="3">单位：</th>
            <td colspan="9">{{supplierNameSelected}}</td>
            <th colspan="3">结算单号：</th>
            <td colspan="4">JS{{generateSerialNumber}}</td>
            <th colspan="3">总额（元）：</th>
            <td colspan="4">{{totalSettlementAmountTaxInclusive.toFixed(2)}}</td>
          </tr>
.....

exportFinalSettlementExcel方法：

exportFinalSettlementExcel(){
      const html = "<style>td{border:1px black solid;vnd.ms-excel.numberformat:@}</style>" + $("#finalSettlementDetail").prop("outerHTML");
      const blob = new Blob([html], {type : 'application/vnd.ms-excel'});
      const url1=URL.createObjectURL(blob)
      const a = document.createElement('a');
      a.href = url1;
      a.download = '结算单.xls';
      a.click();
      URL.revokeObjectURL(url1);
    },

注意事项：

（1）、获取报表在页面上展示的html代码，记得要把css样式也拼接进去，不然导出的excel里面的table都是默认样式，边框为0。

（2）、还要加上vnd.ms-excel.numberformat:@，否则会出现0丢失的情况，比如0018486变成18486，01月06日变成1月6日

excel格式化

1）文本：vnd.ms-excel.numberformat:@
2）日期：vnd-ms-excel.numberformat:yyyy/mm/dd  vnd.ms-excel.numberformat:yyyy-MM-dd HH:mm:ss;
3）数字：vnd-ms-excel.numberformat:#,##0.00
4）货币：vnd-ms-excel.numberformat:$#,##0.00
5）百分比：vnd-ms-excel.numberformat:#0.00%

（3）、使用blob导出html文件时，如果是表格中的内容，则会显示在不同的单元格。如果表格外的内容，如表上面的制表单位和制表日期，则会出现制表单位和制表日期合并成一个单元格的情况，为了避免这种情况，可以将它们写入表格中，设置表格的边框为0即可。