在vue中如何使用xlsx和xlsx-style插件将elementui中的table组件的表格导出下载

要在Vue中使用xlsx和xlsx-style插件将Element UI中的Table组件的表格导出并下载，可以按照以下步骤进行操作：

1. 安装xlsx和xlsx-style插件。打开终端并导航到你的Vue项目目录，运行以下命令：

npm install xlsx xlsx-style

2. 在需要导出表格的组件中，使用import语句导入xlsx和xlsx-style模块：

import XLSX from 'xlsx';
import 'xlsx-style/dist/xlsx.core.min.js'; // 导入xlsx-style模块

3. 在需要导出表格的组件中，创建一个方法来处理导出逻辑。例如，创建一个名为`exportTable`的方法：

exportTable() {
  // 获取要导出的表格数据
  const tableData = this.$refs.table.$el;
  
  // 创建一个空的工作簿对象
  const wb = XLSX.utils.book_new();

  // 创建一个工作表对象
  const ws = XLSX.utils.table_to_sheet(tableData);

  // 将工作表添加到工作簿中
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

  // 将样式应用到工作表中的单元格（如果需要）
  // 可以使用xlsx-style插件提供的API来设置样式

  // 将工作簿对象转换成二进制数据
  const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });

  // 创建一个Blob对象
  const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });

  // 创建一个下载链接并模拟点击下载
  const url = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = 'table.xlsx';
  link.click();

  // 释放URL对象
  window.URL.revokeObjectURL(url);
}

4. 在模板中，将导出按钮绑定到`exportTable`方法：

<template>
  <div>
    <el-button type="primary" @click="exportTable">导出表格</el-button>
    <el-table ref="table" :data="tableData">
      <!-- 表格内容 -->
    </el-table>
  </div>
</template>

在这个示例中，我们使用`refs`属性获取了Table组件的DOM元素，并将其作为参数传递给`table_to_sheet`方法来创建工作表对象。然后，我们将工作表对象添加到工作簿中，并使用`write`方法将工作簿对象转换成二进制数据。最后，我们创建了一个Blob对象，并使用创建的下载链接来模拟点击下载。

请注意，上述示例中的`tableData`和`s2ab`函数需要根据你的实际情况进行调整。`tableData`应该是你要导出的表格数据，而`s2ab`函数是一个将字符串转换成ArrayBuffer的辅助函数（可在下面找到实现）。

function s2ab(s) {
  const buf = new ArrayBuffer(s.length);
  const view = new Uint8Array(buf);
  for (let i = 0; i < s.length; i++) {
    view[i] = s.charCodeAt(i) & 0xFF;
  }
  return buf;
}

这样，当你点击“导出表格”按钮时，表格数据将以Excel文件的形式下载到本地。

希望这可以帮助到你！