vue+elementUI使用XLSX+xlsx-style 页面导出excel表格

要在Vue项目中使用elementUI和XLSX以及xlsx-style来导出带有样式的Excel表格，你需要先安装这些依赖：

npm install xlsx file-saver xlsx-style

然后，你可以创建一个方法来处理导出逻辑：

<template>
  <el-button @click="exportExcel">导出Excel</el-button>
</template>
 
<script>
import XLSX from 'xlsx';
import { saveAs } from 'file-saver';
import { write as writeTable } from 'xlsx-style';
 
export default {
  methods: {
    exportExcel() {
      // 假设你有一个表格的引用
      const table = this.$refs.table;
 
      // 使用XLSX和xlsx-style的API来创建工作簿和工作表
      const ws = XLSX.utils.table_to_sheet(table);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
 
      // 为工作表添加样式
      // 这里是一个示例，你需要根据实际情况定义样式
      const style = {
        // 样式定义
      };
      // 应用样式
      writeTable(wb, {
        ws: "Sheet1",
        rs: { s: { ...style } }
      });
 
      // 生成Excel文件并下载
      const wbout = XLSX.write(wb, { bookType: "xlsx", type: "binary" });
      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;
      }
      saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), "export.xlsx");
    }
  }
};
</script>

在这个例子中，我们假设你有一个表格元素的引用this.$refs.table。exportExcel方法会将该表格转换为工作表，然后使用xlsx-style来为其添加样式。最后，使用file-saver保存生成的Excel文件。

请注意，你需要根据实际情况定义样式，并且确保xlsx-style支持你想要应用的样式。如果你需要更复杂的样式，可能需要使用更高级的库或者自定义样式处理方法。