Vue3利用xlsx、xlsx-js-style导出Excel表格初步使用

<template>
  <div>
    <button @click="exportTable">导出表格</button>
  </div>
</template>
 
<script>
import { ref } from 'vue';
import * as XLSX from 'xlsx';
 
export default {
  setup() {
    const exportTable = () => {
      // 创建工作簿
      const wb = XLSX.utils.book_new();
      // 创建工作表数据
      const ws_data = [
        ['列1', '列2', '列3'],
        ['数据1', '数据2', '数据3'],
        ['数据4', '数据5', '数据6']
      ];
      // 转换工作表为工作簿支持的数据格式
      const ws = XLSX.utils.aoa_to_sheet(ws_data);
      // 将工作表添加到工作簿
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
      // 生成Excel文件并导出
      XLSX.writeFile(wb, '表格.xlsx');
    };
 
    return {
      exportTable
    };
  }
};
</script>

这段代码提供了一个简单的Vue组件，其中包含了创建工作簿、创建工作表、将工作表添加到工作簿以及导出Excel文件的基本步骤。通过点击按钮触发exportTable函数，该函数将创建一个包含三行数据的简单Excel表格并导出。这个例子展示了如何使用xlsx和xlsx-style库在Vue 3项目中导出Excel文件。