vue3+element-plus+xlsx实现复杂表格导入导出功能

<template>
  <div>
    <!-- 导入按钮 -->
    <el-button @click="importData">导入</el-button>
    <!-- 导出按钮 -->
    <el-button @click="exportData">导出</el-button>
    <!-- 上传文件的input元素，隐藏 -->
    <input type="file" @change="handleFileChange" style="display: none" ref="inputFile" />
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
import { read, write, utils } from 'xlsx';
 
const inputFile = ref(null);
 
// 导入数据
function importData() {
  inputFile.value.click(); // 触发文件上传
}
 
// 处理文件变化
function handleFileChange(e) {
  const reader = new FileReader();
  reader.onload = (e) => {
    const data = new Uint8Array(e.target.result);
    const workbook = read(data, { type: 'array' });
    const sheetName = workbook.SheetNames[0];
    const worksheet = workbook.Sheets[sheetName];
    const jsonData = utils.sheet_to_json(worksheet);
    console.log(jsonData); // 这里可以处理导入的数据
  };
  reader.readAsArrayBuffer(e.target.files[0]);
}
 
// 导出数据
function exportData() {
  const jsonData = [
    // 这里是要导出的数据
    { name: 'Alice', email: 'alice@example.com' },
    { name: 'Bob', email: 'bob@example.com' }
  ];
  const ws = utils.json_to_sheet(jsonData);
  const wb = write(ws, { bookType: 'xlsx', type: 'array' });
  const blob = new Blob([wb], { type: 'application/octet-stream' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'data.xlsx';
  a.click();
  URL.revokeObjectURL(url);
}
</script>

这个代码实例提供了一个简单的Vue 3组件，用于导入和导出数据。导入功能使用了一个隐藏的input元素来上传文件，然后使用FileReader和xlsx库解析Excel文件并转换为JSON。导出功能则是创建了一个新的Excel文件，并使用xlsx库将JSON数据转换为Excel表格，最后通过创建一个临时的URL和下载链接来实现导出。