Vue项目中封装Excel的导出和导入功能

1. 导出功能封装

通常使用xlsx库或者其他类似的JavaScript库来实现Excel导出，这里以xlsx为例：

首先，你需要安装相关依赖：

css 复制代码

npm install xlsx file-saver --save

然后，在需要导出功能的组件中导入并封装导出函数：

javascript 复制代码

// 导入所需库
import XLSX from 'xlsx';
import FileSaver from 'file-saver';

// 定义导出函数
export default {
  methods: {
    exportToExcel(data, fields, fileName = 'export.xlsx') {
      // 数据预处理，根据fields将data转换成二维数组格式
      const worksheet = XLSX.utils.aoa_to_sheet(
        data.map(item => fields.map(field => item[field])),
      );
      
      // 创建工作簿并添加worksheet
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

      // 生成blob对象
      const blob = new Blob([XLSX.write(workbook, { bookType: 'xlsx', type: 'binary' })], { type: 'application/octet-stream' });

      // 下载文件
      FileSaver.saveAs(blob, fileName);
    },
  },
};

在上述示例中，data是要导出的数据源，是一个数组，每个元素代表一行；fields是一个字符串数组，表示每行对应列的字段名。

2. 导入功能封装

对于Excel导入，同样可以利用xlsx库：

javascript 复制代码

// 导入xlsx库
import XLSX from 'xlsx';

// 定义导入函数
export default {
  methods: {
    importFromFile(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (event) => {
          const binaryStr = event.target.result;
          const workbook = XLSX.read(binaryStr, { type: 'binary' });
          const sheetName = workbook.SheetNames[0];
          const worksheet = workbook.Sheets[sheetName];
          const data = XLSX.utils.sheet_to_json(worksheet);

          resolve(data); // 解析成功，返回解析后的JSON数据
        };
        reader.onerror = error => reject(error);

        reader.readAsBinaryString(file);
      });
    },
  },
  beforeMount() {
    // 添加文件选择事件监听
    this.$refs.fileInput.addEventListener('change', async (e) => {
      const file = e.target.files[0];
      try {
        const importedData = await this.importFromFile(file);
        console.log('导入的数据:', importedData);
        // 对importedData进一步处理，如存储到数据库等操作
      } catch (error) {
        console.error('导入失败:', error);
      }
    });
  },
};

在模板中需要有一个input[type=file]供用户选择文件，并通过ref属性引用它以便绑定事件处理器。

为了提升用户体验，可能还需要配合Element UI或其他UI库创建上传组件，并处理错误提示和进度显示等功能。