[JavaScript知识库]基于xlsx.js的导入导出插件 lay-excel 操作更方便 功能更强大

一. 介绍插件

话不多说, 上图

功能演示地址：?http://excel.wj2015.com

文档地址：?概览 · LAY-EXCEL 插件文档

?

二. 初始准备

1. 创建个vue2空项目(具体步骤省略 详情看上一篇)

2. 安装依赖

npm i element-ui

npm i lay-excel

3. main.js导入UI插件

?import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

三. 导入导出demo?

注释齐全 复制即可拿来用, 若功能不满足, 可查看文档↓

导出excel样式设置

时间处理

<template>
  <div class="app-container">
    <input
      hidden
      ref="excel-upload-input"
      class="excel-upload-input"
      type="file"
      accept=".xlsx, .xls"
      @change="handleClick"
    />
    <el-button type="primary" @click="importExcel">导入</el-button>
    <el-table
      :data="tableData"
      border
      highlight-current-row
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="username" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="mobile" label="手机号" width="180">
      </el-table-column>
      <el-table-column prop="timeOfEntry" label="入职日期" width="180">
      </el-table-column>
      <el-table-column prop="correctionTime" label="转正日期" width="180">
      </el-table-column>
      <el-table-column prop="workNumber" label="工号" width="180">
      </el-table-column>
      <el-table-column prop="deptName" label="部门"> </el-table-column>
    </el-table>
    <el-button type="primary" @click="exportExcel">导出</el-button>
  </div>
</template>

<script>
import LAY_EXCEL from "lay-excel";
export default {
  data() {
    return {
      tableData: [],
      tableHeader: [],
    };
  },
  methods: {
    // 文件框值更新事件
    handleClick(e) {
      try {
        // 获取导入的文件
        const files = e.target.files;
        const rawFile = files[0];
        if (!rawFile) return;

        // 插件的导入方法
        LAY_EXCEL.importExcel(files, {}, (data) => {
          console.log("导入JSON：" + JSON.stringify(data));
          // 列名转英文方法
          data = LAY_EXCEL.filterImportData(data, {
            username: "A", //梳理时 要确保字段名对应上
            mobile: "B",
            timeOfEntry: "C",
            correctionTime: "D",
            workNumber: "E",
            deptName: "F",
          });
          console.log("梳理后JSON：" + JSON.stringify(data));

          /*  这里要注意 xlsx文件默认的第一页名字叫 Sheet1 ,  一般这么写 data[0].Sheet1 
            如果改过,比如SheetJS ,  这里需要对应修改 data[0].SheetJS 
            */
          //获取表格数据
          let Sheet1 = data[0].SheetJS;
          console.log(Sheet1);
          for (let i = 0; i < Sheet1.length; i++) {
            if (i == 0) {
              // 取到第一行的列头
              this.tableHeader = Object.values(Sheet1[0]);
              //跳过列头
              continue;
            }
            this.tableData.push(Sheet1[i]); //新增一条
          }
          // this.exportConfig.value = false;
          if (this.tableData.length > 0) {
            this.$message.success("导入成功!");
          }
        });
      } catch (e) {
        this.$Message.error("导入错误: " + e.message);
      }
    },
    // 导入
    importExcel() {
      this.$refs["excel-upload-input"].click();
    },
    // 导出
    exportExcel() {
      if (this.tableData.length === 0)
        return this.$message.error("无数据可导出");
      // 姓名	手机号	入职日期	转正日期	工号	部门
      const data = [ ...this.tableData ];
      console.log(data);
      data.unshift({
        username: "姓名",
        mobile: "手机号",
        timeOfEntry: "入职日期",
        correctionTime: "转正日期",
        workNumber: "工号",
        deptName: "部门",
      });

      // 执行导出函数，系统会弹出弹框
      LAY_EXCEL.exportExcel(
        {
          sheet1: data,
        },
        "导出接口数据.xlsx",
        "xlsx"
      );
      this.$message.error("导出成功");
    },
  },
};
</script>

?