当需要将带有样式的表格导出为Excel文件时，可以使用js-xxx库来实现。该库提供了一个名为exportFile的函数，可以将HTML内容导出为Excel文件。

javascript 复制代码

/**
 * 导出数据为文件
 * @example
 * exportFile(data); /// 导出 txt 文件
 * exportFile(data, 'csv-导出文件测试', 'csv'); /// 导出 csv 文件
 * exportFile(document.getElementById('table_to_xls').outerHTML, 'excelWithStyle', 'xls'); /// 导出表格为带样式的 excel xls 文件
 * exportFile('http://a.biugle.cn/img/cdn/dev/avatar/1.png', 'test', 'png'); /// 导出 png 文件
 * @param data 数据
 * @param fileName 文件名
 * @param fileType 文件类型
 * @returns
 */
export function exportFile(data: string, fileName?: string, fileType = 'txt'): void {
  if (isUrl(data)) {
    // eslint-disable-next-line spellcheck/spell-checker
    download(data, `${fileName ?? formatDate(new Date(), 'yyyy-mm-dd-hhiiss')}.${fileType}`);
    return;
  }
  // 加入特殊字符确保 utf-8
  // eslint-disable-next-line spellcheck/spell-checker
  const uri = `data:${getContentType(fileType)};charset=utf-8,\ufeff${encodeURIComponent(data)}`;
  // U+FEFF 是一个零宽度非断字符（Zero Width No-Break Space），也称为"字节顺序标记（Byte Order Mark，BOM）"。
  // eslint-disable-next-line spellcheck/spell-checker
  download(uri, `${fileName ?? formatDate(new Date(), 'yyyy-mm-dd-hhiiss')}.${fileType}`);
  // downloadContent 可以兼容落后浏览器的情况
}

下面是介绍如何导出带样式的表格为 Excel 文件

如何导出带样式的表格为Excel文件

在Web开发中，有时我们需要将网页上的表格导出为Excel文件，同时保留表格的样式。本文将介绍如何使用js-xxx库来实现这一功能。

准备工作

首先，我们需要引入js-xxx库。在本示例中，我们将使用以下CDN链接：

html 复制代码

<script src="https://pandaoh.github.io/js-xxx/html/js-xxx.min.js"></script>

const { exportFile } = $xxx;

// 或者

npm i js-xxx

import { exportFile } from 'js-xxx';
const { exportFile } = require('js-xxx');

创建带样式的表格

我们将创建一个九九乘法表作为示例，并为表格添加一些样式。以下是示例HTML代码：

html 复制代码

<!DOCTYPE html>
<html>
  <head lang="zh-cmn-Hans">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>带样式的 excel 表格导出 demo</title>
    <script src="https://pandaoh.github.io/js-xxx/html/js-xxx.min.js"></script>
  </head>
  <body>
    <div id="table-export-demo">
      <h1 style="color: red">九九乘法表</h1>
      <table style="border: 2px solid blue">
        <tbody id="multiplicationTable"></tbody>
      </table>
    </div>

    <script>
      var table = document.getElementById('multiplicationTable');

      for (var i = 1; i <= 9; i++) {
        var row = document.createElement('tr');
        row.style.border = '1px solid green';
        table.appendChild(row);

        for (var j = 1; j <= 9; j++) {
          var cell = document.createElement('td');
          cell.style.border = '1px solid green';

          if (i === j) {
            if ((i * j) % 3 === 0) {
              cell.className = 'equals triple';
            } else {
              cell.className = 'equals';
            }
          } else if ((i * j) % 3 === 0) {
            cell.className = 'triple';
          }

          cell.textContent = i + '×' + j + '=' + i * j;
          row.appendChild(cell);
        }
      }

      document.getElementById('my-btn').onclick = () => {
        const { exportFile, printDom } = $xxx;
        exportFile(
          document.getElementById('table-export-demo').outerHTML,
          `excelTableWithStyle-${new Date().getTime()}`,
          'xls'
        );

        // printDom('#table-export-demo', {
        //   bodyStyle: {
        //     padding: '10px',
        //     backgroundColor: 'red'
        //   }
        // });
      };
    </script>
    <button id="my-btn">download</button>
  </body>
</html>

在上述示例中，我们首先创建一个带有id为table-export-demo的<div>元素，用于包裹整个导出内容。在该<div>中，我们创建一个带有样式的九九乘法表，并将其放置在一个带有id为multiplicationTable的<tbody>元素中。

导出表格为Excel文件

在示例代码的最后，我们使用exportFile函数将带样式的表格导出为Excel文件。exportFile函数接受三个参数：

导出的HTML内容，这里我们使用document.getElementById('table-export-demo').outerHTML获取整个导出内容的HTML字符串。
导出文件的名称，这里我们使用excelTableWithStyle-${new Date().getTime()}作为文件名，确保每次导出都有唯一的名称。
导出文件的格式，这里我们使用'xls'表示导出为Excel文件。

注意

样式需些行内样式，因为导出的是 dom 元素，并没有包含类样式这些。
最好用一个大的 div 包起需要导出的部分。
如果需要导出类样式，可以参考 js-xxx 的 printDom 方法。
使用 printDom 等打印样式时，请注意需要开启浏览器打印设置中的 - 更多设置-背景图像显示开关

完成上述步骤后，当页面加载后，点击导出按钮，可以将带有样式的表格导出为 Excel 文件。

演示预览

以上就是如何使用js-xxx库将带样式的表格导出为Excel文件的介绍。通过这个简单的示例，你可以在自己的项目中轻松实现类似的功能。希望本文对你有所帮助！

Web 纯前端导出带样式的表格为 Excel 文件

如何导出带样式的表格为Excel文件

准备工作

创建带样式的表格

导出表格为Excel文件

演示预览