Vue 项目中 Excel 导入导出功能笔记

功能概述

该代码实现了 Vue 项目中 Excel 文件的三大核心功能：

1. Excel 导入：上传文件并解析数据，刷新表格展示。
2. 模板下载：获取并下载标准 Excel 模板文件。
3. 数据导出：将表格数据按多级表头结构导出为 Excel 文件。

一. Excel 导入功能

使用FormData封装文件数据，支持二进制文件上传。

通过 API 请求与后端交互，根据响应状态处理成功 / 失败逻辑。

const uploadTemp = ref(); // 上传组件引用
const exportImportHandler = async (files) => {
  const fileForm = new FormData();
  fileForm.append('file', files.file); // 封装文件数据
  const { code, message } = await ImportExcelApi(fileForm); // 调用上传API
  if (code === 200) {
    ElMessage.success('导入成功');
    uploadTemp.value.clearFiles(); // 清空上传组件
    getTableList(); // 刷新表格数据
  } else {
    ElMessage.error(message);
  }
};

二. 模板下载功能

通过 API 获取模板文件的二进制数据（Blob）。

使用downloadfile工具函数将 Blob 转换为可下载的文件。 

const fileBlob = ref();
const downloadFileTemp = async () => {
  try {
    fileBlob.value = await DownloadTemplateAPI(); // 获取模板数据
    // 利用LuckyExcel处理Excel文件（可选，根据库需求）
    downloadfile({ excelFileName: '储气库排液情况模板.xlsx' }, fileBlob.value);
  } catch (error) {
    console.error(error);
  }
};

三. 数据导出功能

1.调用导出api

const exportHandler = async () => {
  const headers = []; // 表头数组（二维数组，代表多级表头）
  const columns = []; // 列配置数组
  
  realTableColumn.value.forEach(item => {
    if (item.prop !== "operator") { // 排除操作列
      if (item.children) {
        // 处理有子列的情况（三级表头）
        item.children.forEach(child => {
          const header = [];
          header.push("重点工作安排"); // 一级表头
          header.push(item.label);    // 二级表头
          header.push(child.label);   // 三级表头
          headers.push(header);
          columns.push({ columnKey: child.prop, columnDict: [] });
        });
      } else {
        // 处理普通列（两级表头）
        const header = [];
        header.push("重点工作安排"); // 一级表头
        for (let i = 0; i < 2; i++) {
          header.push(item.label); // 二级表头重复两次（保持结构一致）
        }
        headers.push(header);
        columns.push({ columnKey: item.prop, columnDict: [] });
      }
    }
  });
  
  // 调用导出API并下载
  const params = { headers, columns, /* 其他参数 */ };
  const resData = await ExportExcelApi(params);
  downloadfile(resData, '重点工作安排.xlsx');
};

header.push：用于构建多级表头的层级结构，将各级表头名称按顺序存入数组，

最终形成二维数组（如[['一级', '二级', '三级'], ...]），供 Excel 导出工具识别。示例：

const header = [];
header.push("一级表头");   // 数组变为 ["一级表头"]
header.push("二级表头");   // 数组变为 ["一级表头", "二级表头"]
header.push("三级表头");   // 数组变为 ["一级表头", "二级表头", "三级表头"]
headers.push(header);      // 最终存入二维数组 [["一级表头", "二级表头", "三级表头"]]

2.不调用导出api

const dataOut = async () => {
  try {
    // 检查是否有数据可导出
    if (!tableBody.tableData || tableBody.tableData.length === 0) {
      ElMessage.warning('没有数据可导出');
      return;
    }

    // 动态导入xlsx库
    const XLSX = await import('xlsx');

    // 转换数据格式，将列prop映射为label
    const exportData = tableBody.tableData.map(item => {
      const row = {};
      tableColumn.forEach(column => {
        if (column.prop && column.label) {
          // 处理嵌套属性
          const value = column.prop.split('.').reduce((acc, part) => {
            return acc && acc[part] !== undefined ? acc[part] : '';
          }, item);

          row[column.label] = value;
        }
      });
      return row;
    });

    // 创建工作簿和工作表
    const ws = XLSX.utils.json_to_sheet(exportData);
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, '测试数据记录');

    // 导出文件
    const fileName = `测试数据记录_${new Date().toLocaleDateString()}.xlsx`;
    XLSX.writeFile(wb, fileName);

    ElMessage.success('数据导出成功');
  } catch (error) {
    console.error('数据导出失败:', error);
    ElMessage.error('数据导出失败，请联系管理员');
  }
};

四、接口工具函数

import http from '@/utils/http/index';
export enum Api {
  ImportExcel = '/dilraba/Dilmurat/imports', // 导入
  DownloadTemplate = '/dilraba/Dilmurat/downloadTemplate', // 下载模板
}
/** 下载重点工作模板 */
export function DownloadTemplateAPI() {
  return http.get({
      url: API.DownloadTemplate,
      responseType: 'blob'
  });
}
// 导入
export function ImportExcelApi(data = {}) {
  return http.post({
      url: API.ImportExcel,
      data: data
  });
}