导出excel功能

Vue项目实现Excel数据导出

最新推荐文章于 2025-12-07 09:58:49 发布

原创最新推荐文章于 2025-12-07 09:58:49 发布 · 323 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

插件专栏收录该内容

9 篇文章

订阅专栏

该博客介绍了如何在Vue项目中使用插件实现Excel数据的导出。首先，通过npm安装所需的file-saver和script-loader插件。然后，创建并引入Export2Zip.js和Export2Excel.js文件。在代码中，定义了表头和数据处理函数，将请求到的员工信息转换为符合导出格式的二维数组，并调用导出方法。整个过程涉及到了数据格式转换、时间处理和自定义表头设置。

前言

导出excel插件的使用

一、安装插件

npm install file-saver --save
npm install script-loader --save -D

二、使用步骤

在src目录下新建一个vendor文件夹引入Export2Zip.js和Export2Excel.js文件，vue-elment-admin源码中有可提取
使用

      //  表头关系，自定义
      const headers = {
        姓名: "username",
        手机号: "mobile",
        入职日期: "timeOfEntry",
        聘用形式: "formOfEmployment",
        转正日期: "correctionTime",
        工号: "workNumber",
        部门: "departmentName",
      };
      
      // 按需加载调用导出插件
      import("@/vendor/Export2Excel").then(async (excel) => {
       //excel中包含所有下面需要使用的方法
        // 请求列表,获取所有要导出的数据
        let { rows } = await getEmployeeList({
          page: 1,
          size: this.page.total,
        });
        // 处理数据格式，变为二维数组
        let data = this.formatJson(headers, rows);
        
        // 数据传入插件准备导出
        excel.export_json_to_excel({
          header: Object.keys(headers), //表头数组
          data, //二维数组结构，必传，为导出的数据列表
          filename: "员工信息列表", //文件标题
          autoWidth: true, //列表宽度是否自适应
          bookType: "xlsx", //生成文件类型后缀
        });
      });

将请求数据处理成二维数组的函数

    // 数据处理为二维数组
    formatJson(headers, rows) {
      rows = rows.map((item) => {
        return Object.keys(headers).map((key) => {
          // 对是时间和聘用形式做处理
          if (
            headers[key] == "timeOfEntry" ||
            headers[key] == "correctionTime"
          ) {
            return formDate(item[headers[key]]);
          }
          if (headers[key] == "formOfEmployment") {
            let en = engageModality.data.find((obj) => {
              return item[headers[key]] == obj.id;
            });
            return en ? en.value : "未知";
          }

          return item[headers[key]];
        });
      });
      return rows;
    },