前端配合Egg实现导入导出Excle文件功能

最新推荐文章于 2023-06-06 15:38:55 发布

Creabine

最新推荐文章于 2023-06-06 15:38:55 发布

阅读量3.2k

点赞数

分类专栏：前端工程师从初级到高级 node.js 文章标签： Egg Excle 导入导出 XLSX

本文链接：https://blog.csdn.net/Creabine/article/details/100559786

版权

本文详细介绍了如何在前后端分离的项目中，利用Egg.js和React实现Excel文件的导入导出功能。前端使用ant Design的Upload组件上传文件，后端通过Egg.js和xlsx库进行文件的读取和转换。对于导入，文章提到了从.xlsx文件中提取数据并校验后存入MongoDB数据库的过程。导出部分包括纯前端导出和后端数据导出，涉及如何将数据转换为Excel格式并触发下载。

摘要由CSDN通过智能技术生成

本来我只是个小前端，来了新公司前后端一起搞，node也写的美滋滋，crud非常嗨皮。结果就在上周，突然多了个导入导出功能。虽然没做过，但是想一想查一查，应该也搞的定，没想到，一搞就是一周。今天终于弄好了，所以赶紧做个笔记，完整的记录下来，为自己整理思路，希望也能帮到后来的人。

导入

首先，导入需要上传文件，这就涉及到egg-multipart，这是一个egg自带的内部库，我们不需要安装，直接在config文件中增加以下配置即可：

multipart: {
   
  fileSize: '50mb',  // 文件大小
  mode: 'file', // 文件模式
  whitelist: ['.xlsx'], // 文件类型白名单
},

然后，前端使用ant Design已经做好的上传组件Upload来上传文件：

// 点击导入按钮后执行的方法
onImport = () => {
   
	// 在弹框中展示警告信息及上传组件
    const modal = Modal.warning({
   });
	// 上传组件配置
    const uploadProps = {
   
      name: 'users',  // 上传文件的文件名
      action: '/server/api/users/import',  // 上传接口
      accept: '.xlsx', // 能接受的文件后缀名，不符合的在文件选择框中无法选中
      showUploadList: false, // 是否显示上传后的文件
      beforeUpload: (file: any) => {
    // 上传前回调，校验文件类型，大小
        const XLSX_TYPE = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
        const isXLSX = file.type === XLSX_TYPE;
        if (!isXLSX) {
   
          message.error('请选择.xlsx文件!');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
   
          message.error('文件不能超过2MB!');
        }
        if (isXLSX && isLt2M) {
   
          modal.destroy();
        }
        return isXLSX && isLt2M;
      },
      onChange: (info: any) => {
    // 上传状态改变回调，根据status来写相关逻辑
        if (info.file.status === 'done') {
   
          const {
    code, data } = info.file.response;
          if (code === 0) {
   
            message.success(`文件 ${
     info.file.name} 导入成功，刷新列表!`);
            // 上传成功后的逻辑
          }
        } else if (info.file.status === 'error') {
   
          console.error('import fail message: ', info.file.response.msg);
          const msg = info.file.response.msg || '请检查模板及数据！';
          message.error(`文件 ${
     info.file.name} 导入失败，${
     msg}`);
        }
      }