vue实现数据导入导出为excel（简单详细）

本文使用到了xlxs库解析excel文件。

依赖安装：

csharp 复制代码

npm install xlsx
npm install file-saver
# 或者
yarn add xlsx
yarn add file-saver

库引入：

javascript 复制代码

import { saveAs } from 'file-saver';
import { utils, writeFile, read } from 'xlsx';

实现从本地导入文件实现数据的批量增加：

a. 页面结构：

ruby 复制代码

<div style="display: flex;justify-content: space-between;">
    <el-upload action="#" :before-upload="beforeUpload" :show-file-list="false" accept=".xlsx, .xls">
        <el-button size="small" type="primary" style="margin-right: 20px;">导入文件</el-button>
    </el-upload>
    <el-button type="primary" size="small" @click="exportToExcel">导出为excel</el-button>
</div>

b. 核心：

typescript 复制代码

const beforeUpload = (file:any) =>{
  console.log(file, '--文件');
  handleFileUpload(file)
  return false; // 阻止默认上传行为
}

// 处理Excel文件上传
const handleFileUpload = (file: any) => {
  if (!file) {
    ElMessage.error('请选择文件');
    return;
  }
  
  // 检查文件类型
  const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || 
                  file.type === 'application/vnd.ms-excel';
  if (!isExcel) {
    ElMessage.error('只能上传Excel文件(.xlsx, .xls)');
    return;
  }
  
  // 读取文件
  const reader = new FileReader();
  reader.onload = (e: any) => {
    try {
      const data = new Uint8Array(e.target.result);
      const workbook = read(data, { type: 'array' });
      const worksheet = workbook.Sheets[workbook.SheetNames[0]];
 
      // 将工作表转换为JSON
      const jsonData = utils.sheet_to_json(worksheet);
      
      if (jsonData.length === 0) {
        ElMessage.warning('导入的Excel文件无有效数据');
        return;
      }
      
      // 处理导入的数据
      processImportedData(jsonData);
    } catch (error) {
      ElMessage.error('解析Excel文件失败: ' + error.message);
    }
  };
  
  reader.onerror = () => {
    ElMessage.error('读取文件失败');
  };
  
  reader.readAsArrayBuffer(file);
};

// 处理导入的数据
const processImportedData = async (data: any[]) => {
  try {
    // 转换数据格式以匹配API需求
    const roles:Role[]= data.map(item => {
      return {
        roleName: item['职位名称'] || '',
      };
    });
    
    // 验证数据
    if (roles.some(role => !role.roleName)) {
      ElMessage.error('导入数据中存在职位名称为空的记录');
      return;
    }
    
    // 显示导入确认
    ElMessage.info(`准备导入 ${roles.length} 条职位记录`);
    
    // 批量添加角色
    // 假设您的API支持批量添加，如果不支持，需要循环调用单个添加API
    for (const role of roles) {
      await reqAddOrUpdateRole(role);
    }
    
    ElMessage.success('导入成功');
    // 刷新列表
    getRoleList();
  } catch (error) {
    ElMessage.error('导入失败: ' + error.message);
  }
};

实现将表格数据导出为excel格式：

go 复制代码

// 导出Excel功能
const exportToExcel = () => {
  try {
    // 1. 准备数据 也可以自己定义个map进行映射
    const exportData = roleList.value.map(item => {
      return {
        'ID': item.id,
        '职位名称': item.roleName,
        '创建时间': item.createTime,
        '更新时间': item.updateTime
      };
    });

    // 2. 创建工作簿和工作表
    const worksheet = utils.json_to_sheet(exportData);
    const workbook = utils.book_new();
    utils.book_append_sheet(workbook, worksheet, '职位列表');

    // 3. 设置列宽
    const columnWidths = [
      { wch: 10 }, // ID列宽
      { wch: 20 }, // 职位名称列宽
      { wch: 20 }, // 创建时间列宽
      { wch: 20 }  // 更新时间列宽
    ];
    worksheet['!cols'] = columnWidths;

    // 4. 生成Excel文件并下载
    const excelBuffer = writeFile(workbook, '职位列表.xlsx', { bookType: 'xlsx', type: 'array' });
    const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });
    saveAs(blob, '职位列表.xlsx');

    ElMessage.success('导出成功');
  } catch (error) {
    ElMessage.error('导出失败: ' + error.message);
  }
};