Vue+xlsx+xlsx-style修改表格样式并导出

<template>
  <div>
    <button @click="exportTable">导出表格</button>
  </div>
</template>
 
<script>
import XLSX from 'xlsx';
import xlsxStyle from 'xlsx-style';
 
export default {
  methods: {
    exportTable() {
      // 假设你的表格数据已经准备好并存储在tableData变量中
      const tableData = [
        // 表格数据，例如 [['列1', '列2'], ['数据1', '数据2']]
      ];
 
      // 创建工作簿和工作表
      const ws = xlsxStyle.utils.json_to_sheet(tableData);
      const wb = xlsxStyle.utils.book_new();
      xlsxStyle.utils.book_append_sheet(wb, ws, "Sheet1");
 
      // 设置样式
      const style = {
        // 样式对象，例如 { font: { name: 'Arial', bold: true }, alignment: { horizontal: 'center' } }
      };
      xlsxStyle.utils.sheet_add_style(ws, style, {
        // 应用样式的范围或单元格
      });
 
      // 导出工作簿
      xlsxStyle.writeFile(wb, "表格.xlsx");
    }
  }
};
</script>

这个代码示例展示了如何在Vue组件中使用xlsx-style库来创建一个带有特定样式的Excel表格并导出它。首先，我们创建了工作簿和工作表，然后应用了样式，最后将工作簿导出为一个Excel文件。注意，你需要先安装xlsx和xlsx-style这两个库才能运行此代码。