如何利用Vue和Excel快速生成可交互的数据报告

# 创建Excel导入和导出文件夹
mkdir excel

# 进入excel文件夹
cd excel

# 初始化package.json文件
npm init -y

# 安装xlsx插件
npm install xlsx --save

# 安装file-saver插件
npm install file-saver --save

data() {
  return {
    excelData: []
  }
},

methods: {
  importExcel(file) {
    const reader = new FileReader();
    reader.onload = (e) => {
      const data = new Uint8Array(e.target.result);
      const workbook = XLSX.read(data, { type: 'array' });
      const worksheet = workbook.Sheets[workbook.SheetNames[0]];
      const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
      this.excelData = jsonData;
    };
    reader.readAsArrayBuffer(file);
  }
},

<input type="file" @change="importExcel($event.target.files[0])">

<table>
  <thead>
    <tr>
      <th v-for="header in excelData[0]">{{ header }}</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(row, index) in excelData" :key="index">
      <td v-for="cell in row">{{ cell }}</td>
    </tr>
  </tbody>
</table>

methods: {
  exportExcel() {
    const worksheet = XLSX.utils.aoa_to_sheet(this.excelData);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
    XLSX.writeFile(workbook, 'data.xlsx');
  }
},

<button @click="exportExcel">导出Excel</button>