如何使用exceljs将HTML元素渲染导出为Excel并仅展示文本内容

核心思路是提前对带HTML标签的表头字符串做纯文本提取，再传入ExcelJS的表头配置中即可，无需修改ExcelJS本身的导出逻辑。

步骤1：实现HTML标签剥离工具函数 #

根据运行环境选择对应实现即可：

// 浏览器环境方案：利用DOM自动解析
function stripHtml(htmlStr) {
  const tmp = document.createElement('div');
  tmp.innerHTML = htmlStr;
  return tmp.textContent || tmp.innerText || '';
}

// Node.js环境方案：用正则处理（无DOM环境可用）
function stripHtmlNode(htmlStr) {
  // 先转义常见HTML实体
  const entities = {
    ' ': ' ',
    '&lt;': '<',
    '&gt;': '>',
    '&amp;': '&',
    '&quot;': '"',
    '&apos;': "'"
  };
  let str = htmlStr.replace(/&[a-z0-9]+;/g, match => entities[match] || match);
  // 移除所有HTML标签
  return str.replace(/<[^>]*>/g, '').trim();
}

步骤2：处理表头后完成导出 #

完整的导出示例代码如下：

import ExcelJS from 'exceljs';

async function exportExcelWithHtmlHeaders() {
  // 原始带HTML标签的表头数组
  const rawHeaders = [
    '<p>序号</p>',
    '<span style="color:red">用户名</span>',
    '<h4>注册时间</h4>',
    '<div class="header">联系电话</div>'
  ];

  // 预处理表头，剥离HTML得到纯文本
  const processedHeaders = rawHeaders.map(header => stripHtml(header));

  // 初始化工作簿、工作表
  const workbook = new ExcelJS.Workbook();
  const worksheet = workbook.addWorksheet('数据报表');

  // 配置列，使用处理后的纯文本作为表头
  worksheet.columns = processedHeaders.map((header, index) => {
    return {
      header: header,
      key: `col_${index}`,
      width: 20
    }
  });

  // 添加表格数据（原有逻辑无需修改）
  worksheet.addRow([1, '张三', '2024-01-01', '13xxxxxxxxx']);
  worksheet.addRow([2, '李四', '2024-02-01', '13xxxxxxxxx']);

  // 浏览器端导出文件示例
  const buffer = await workbook.xlsx.writeBuffer();
  const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = '报表导出.xlsx';
  a.click();
  URL.revokeObjectURL(url);
}

补充说明 #

如果需要保留HTML里的样式（比如字体颜色、粗体）同步到Excel表头，可以在剥离标签的同时解析元素的style属性，再通过ExcelJS的font、alignment等配置给表头单元格设置对应样式即可，不需要展示的HTML标签直接丢弃。

内容的提问来源于stack exchange，提问作者Avirup Chakraborty