HTML转Excel时如何设置字体大小？多种尝试均无效

直接将HTML内容通过Blob保存为.xls文件时，Excel会以HTML兼容模式解析内容，普通CSS字体大小设置经常失效——本质原因是Excel对HTML/CSS的支持规则和浏览器差异很大，多数自定义样式会被默认覆盖。

方案1：使用专业Excel生成库（推荐） #

放弃直接存HTML的方式，用SheetJS（xlsx）这类库生成真正的Excel文件，能完全控制单元格样式，不会出现样式丢失问题。

示例代码： #

// 先引入SheetJS库（可通过npm安装：npm install xlsx，或CDN引入）
function downloadTableAsExcel(tableElement, fileName) {
  // 将HTML表格转为Excel工作簿
  const workbook = XLSX.utils.table_to_book(tableElement, {sheet: "Sheet1"});
  
  // 遍历所有单元格，统一设置字体大小（12pt对应Excel的12号字体）
  const targetSheet = workbook.Sheets["Sheet1"];
  for (const cellKey in targetSheet) {
    if (cellKey.startsWith('!')) continue; // 跳过工作表元数据
    targetSheet[cellKey].s = {
      font: { sz: 12 }
    };
  }
  
  // 生成并下载文件
  XLSX.writeFile(workbook, `${fileName}.xlsx`);
}

// 调用示例：传入页面中的表格元素和文件名
downloadTableAsExcel(document.querySelector('table'), 'subestacao');

方案2：优化HTML内容适配Excel解析 #

如果坚持用HTML转xls的方式，需要使用Excel支持的mso前缀CSS属性或<font>标签，且字号单位必须用pt（Excel的原生字号单位）。

优化后的HTML内容示例： #

<table>
  <tr>
    <!-- 用mso专属样式设置字体大小 -->
    <td style="mso-font-size:12pt; font-size:12pt;">数据内容1</td>
    <!-- 或者用Excel兼容的<font>标签 -->
    <td><font size="12">数据内容2</font></td>
  </tr>
</table>

你的下载代码可保留，但需确保data是上述优化后的HTML内容： #

var blob = new Blob(["\ufeff" + data], { // 加BOM解决中文乱码问题
  type: "application/vnd.ms-excel",
});
var link = document.createElement("a");
link.href = window.URL.createObjectURL(blob);
link.download = "subestacao.xls";
link.click();

注意：这种方式仍有局限性，复杂样式（如单元格背景、边框）可能还是无法完全适配，优先推荐方案1。

内容的提问来源于stack exchange，提问作者Pedro da Silva Farias