jq 前端table导出excl带样式

可以使用第三方库 `SheetJS` 来实现前端 table 导出 excel 并带有样式。以下是一个简单的示例：

1. 安装 SheetJS

npm install xlsx-style --save

2. 在你的代码中引入 SheetJS

import XLSX from 'xlsx-style';

3. 编写导出函数

exportExcel() {
  // 获取 table 元素
  const table = document.querySelector('#my-table');
  // 将 table 转换为 SheetJS 的 worksheet
  const worksheet = XLSX.utils.table_to_sheet(table);
  // 创建 workbook
  const workbook = XLSX.utils.book_new();
  // 将 worksheet 添加到 workbook 中
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
  // 生成二进制流并下载
  XLSX.writeFile(workbook, 'my-table.xlsx', { bookType: 'xlsx', bookSST: false, type: 'binary' });
}

4. 在 table 中定义需要导出的样式

<table id="my-table">
  <thead>
    <tr>
      <th style="background-color: #ccc; color: #fff;">Column 1</th>
      <th style="background-color: #ccc; color: #fff;">Column 2</th>
      <th style="background-color: #ccc; color: #fff;">Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="background-color: #f00; color: #fff;">1</td>
      <td style="background-color: #0f0; color: #fff;">2</td>
      <td style="background-color: #00f; color: #fff;">3</td>
    </tr>
    <tr>
      <td style="background-color: #0ff; color: #000;">4</td>
      <td style="background-color: #f0f; color: #000;">5</td>
      <td style="background-color: #ff0; color: #000;">6</td>
    </tr>
  </tbody>
</table>

在导出时，SheetJS 会自动将表格中的样式应用到导出的 excel 文件中。不过需要注意的是，SheetJS 对于某些 CSS 样式可能不支持，导致导出的 excel 文件中样式不完全一致。