vue2 - 基于Element UI实现上传Excel表单数据功能

这篇具有很好参考价值的文章主要介绍了vue2 - 基于Element UI实现上传Excel表单数据功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、项目场景

批量数据上传后台,需要从后台下载一个固定格式的 Excel表格,然后在表格里面添加数据,将数据格式化,再上传给后台,后台做解析处理,往数据库添加数据

二、实现功能展示

点击导入excel按钮,跳转到上传excel功能页面,点击上传或者是通过拖拽都能实现excel表格上传
vue上传excel,vue+组件库,ui,excel,javascript,vue

三、实现思路

通过Element UI的<el-dialog>实现弹出层

1、excel按钮

:isShow=isShow是否显示上传文件层
:onSuccess="success"上传成功之后的回调

2、excel上传页面

accept=".xlsx, .xls":限定文件类型
beforeUpload(){}在上传之前做一些自己的特殊判断,如判断文件的大小是否大于 1 兆?若大于 1 兆则停止解析并提示错误信息。

四、实现代码

1、下载xlsx

excel导入功能需要使用npm包xlsx,所以需要安装**xlsx**插件

npm i xlsx

2、页面代码

excel按钮页面

<template>
  <div>
    <el-button
      type="primary"
      @click="goExcel"
      style="margin: 50px 50px 50px 50px"
      >导入excel表格</el-button
    >
    <UploadExcel :onSuccess="success" :isShow="isShow"></UploadExcel>
  </div>
</template>
<script>
import UploadExcel from "./components/UploadExcel.vue";
export default {
  name: "App",
  components: { UploadExcel },
  data() {
    return {
      isShow: false,
    };
  },
  methods: {
    goExcel() {
      this.isShow = true;
    },
    async success(data) {
      // 数据库的key为英文,我们上传的key为中文,需要一一转化
      const userRelations = {
        入职日期: "timeOfEntry",
        手机号: "mobile",
        姓名: "username",
        转正日期: "correctionTime",
        工号: "workNumber",
      };
      // 将key值一一对应
      const newArr = data.results.map((item) => {
        var userInfo = {};
        Object.keys(item).forEach((key) => {
          userInfo[userRelations[key]] = item[key];
        });
        return userInfo;
      });
      console.log(newArr);
      //   await importEmployee(newArr); // 调用上传接口
      this.$message("上传文件成功");
      this.isShow = false;
    },
  },
};
</script>

UploadExcel页面

<template>
  <el-dialog title="导入excel表格" :visible="isShow" @close="closeShow">
    <div class="upload-excel">
      <div class="btn-upload">
        <el-button
          :loading="loading"
          size="mini"
          type="primary"
          @click="handleUpload"
        >
          点击上传
        </el-button>
      </div>

      <input
        ref="excel-upload-input"
        class="excel-upload-input"
        type="file"
        accept=".xlsx, .xls"
        @change="handleClick"
      />
      <div
        class="drop"
        @drop="handleDrop"
        @dragover="handleDragover"
        @dragenter="handleDragover"
      >
        <i class="el-icon-upload" />
        <span>将文件拖到此处</span>
      </div>
    </div>
  </el-dialog>
</template>


<script>
import * as XLSX from "xlsx";
export default {
  props: {
    isShow: Boolean,
    onSuccess: Function, // eslint-disable-line
  },
  data() {
    return {
      loading: false,
      excelData: {
        header: [],
        results: [],
      },
    };
  },
  methods: {
    closeShow() {
      this.$parent.isShow = false;
    },
    // 点击导入
    handleDrop(e) {
      e.stopPropagation();
      e.preventDefault();
      if (this.loading) return;
      const files = e.dataTransfer.files;
      if (files.length !== 1) {
        this.$message.error("仅支持单个上传一个文件");
        return;
      }
      const rawFile = files[0]; // 获取文件信息
      if (!this.isExcel(rawFile)) {
        //是不是excel文件
        this.$message.error(
          "Only supports upload .xlsx, .xls, .csv suffix files"
        );
        return false;
      }
      this.upload(rawFile);
      e.stopPropagation();
      e.preventDefault();
    },
    handleDragover(e) {
      e.stopPropagation();
      e.preventDefault();
      e.dataTransfer.dropEffect = "copy";
    },
    handleUpload() {
      this.$refs["excel-upload-input"].click(); //触发表单上传事件,跳出选择文件框
    },
    handleClick(e) {
      const files = e.target.files;
      const rawFile = files[0]; // only use files[0]
      if (!rawFile) return;
      this.upload(rawFile);
    },
    upload(rawFile) {
      this.$refs["excel-upload-input"].value = null; // fix can't select the same excel
      if (!this.beforeUpload) {
        this.readerData(rawFile);
        return;
      }
      const before = this.beforeUpload(rawFile); //判断文件上传大小
      if (before) {
        this.readerData(rawFile); //把excel转化成数组
      }
    },
    // 限定文件大小
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (isLt1M) {
        return true;
      }
      this.$message({
        message: "请不要上传大于1M的文件",
        type: "warning",
      });
      return false;
    },

    readerData(rawFile) {
      this.loading = true;
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsArrayBuffer(rawFile);
        //参数可以是 Blob 或者 File 对象异步结果将在onload 事件中体现
        reader.onload = (e) => {
          const data = e.target.result;
          const workbook = XLSX.read(data, { type: "array" });
          const firstSheetName = workbook.SheetNames[0]; // "SheetJS" 取出工作表名称
          const worksheet = workbook.Sheets[firstSheetName]; //取出工作表名称对应的表格数据
          const header = this.getHeaderRow(worksheet); //表头名
          const results = XLSX.utils.sheet_to_json(worksheet); //输出数据,除去表头
          this.excelData.results = results;
          this.excelData.header = header;
          this.onSuccess && this.onSuccess(this.excelData);
          this.loading = false;
          resolve();
        };
      });
    },
    getHeaderRow(sheet) {
      const headers = [];
      const range = XLSX.utils.decode_range(sheet["!ref"]); //!ref: "A1:E21"
      let C;
      const R = range.s.r;
      /* start in the first row */
      for (C = range.s.c; C <= range.e.c; ++C) {
        /* walk every column in the range */
        const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })];
        /* find the cell in the first row */
        let hdr = "UNKNOWN " + C; // <-- replace with your desired default
        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell); //每个头部名
        headers.push(hdr);
      }
      return headers;
    },
    isExcel(file) {
      return /\.(xlsx|xls|csv)$/.test(file.name);
    },
  },
};
</script>
<style scoped lang="scss">
.upload-excel {
  display: flex;
  justify-content: center;
  // margin-top: 100px;
  .excel-upload-input {
    display: none;
    z-index: -9999;
  }
  .btn-upload,
  .drop {
    border: 1px dashed #bbb;
    width: 350px;
    height: 160px;
    text-align: center;
    line-height: 160px;
  }
  .drop {
    line-height: 80px;
    color: #bbb;
    i {
      font-size: 60px;
      display: block;
    }
  }
}
</style>

五、实现效果

vue上传excel,vue+组件库,ui,excel,javascript,vue文章来源地址https://www.toymoban.com/news/detail-534579.html

到了这里,关于vue2 - 基于Element UI实现上传Excel表单数据功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • springboot+vue2 实现文件上传,vue表单实现上传多张照片或视频回显

    此教程可以实现对上传的文件管理,并加入了我的功能需求,大家可以自行进行修改。 文件管理: 功能需求视频: 文件上传视频(图片和视频) 先来简单介绍下功能实现,实现此功能分为数据库、后端java、前端vue共同实现; 业务流程: vue页面点击上传后,通过调用后端接

    2024年02月04日
    浏览(48)
  • 若依前后端分离+Vue2+Element UI实现根据列数据展示不同页面的数据

    多个表格中存在同一字段,并且可通过该字段查到与之对应的数据。举个简单的例子,比如我有一个学生表、一个老师表、一个课程表,假设老师表和学生表里都有课程ID这一字段,那么我可以在课程表里通过课程ID来,查找需要上这门课的学生,以及教这门课的老师,并且在

    2024年01月19日
    浏览(46)
  • vue2 element ui 实现图标下拉选择

    1.展示效果 代码展示: (1)封装icon.js (2) 在需要使用的页面复制进去 (3)在自己需要使用的地方复制进去 (4)css样式部分 (5)初始化数据

    2024年02月10日
    浏览(43)
  • Vue2 +Element-ui实现前端页面

    以一个简单的前端页面为例。主要是利用vue和element-ui实现。 里面涉及的主要包括:新建vue项目、一行多个输入框、页面实现等。   ①首先安装nodejs,这部分在此就不讲啦。 ②然后安装vue-cli: 查看是否安装成功: 安装成功之后就输出vue的版本 ③在cmd窗口新建一个vue2脚手架

    2024年02月16日
    浏览(42)
  • 基于vue+Element UI的文件上传(可拖拽上传)

    drag: 支持拖拽上传 action:必选参数,上传的地址 ref:这里主要是用于文件上传完成后清除文件的 on-remove:文件列表移除文件时的钩子 auto-upload:是否在选取文件后立即进行上传 on-change:文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用 注:这里使用的

    2023年04月08日
    浏览(45)
  • Vue + Element ui 实现动态表单,包括新增行/删除行/动态表单验证/提交功能

    原创/朱季谦 最近通过Vue + Element ui实现了动态表单功能,该功能还包括了动态表单新增行、删除行、动态表单验证、动态表单提交功能,趁热打铁,将开发心得记录下来,方便以后再遇到类似功能时,直接拿来应用。 简化的页面效果图如下: 最开始,我是用了纯粹的表格形

    2024年02月04日
    浏览(47)
  • vue2+element-ui 实现国际化

    在src目录下创建一个lang文件夹,同时创建zh.js(中文),en.js(英文),ja.js(日文),fr.js(法文)四个语言包js文件,并创建一个index.js文件,用来整合语言包 对于一个项目来说,一个语言包需要包含所有页面以及组件;在语言包以页面为单位,创建一个对象;对公共的title或者按钮名

    2024年02月02日
    浏览(53)
  • vue2+element-ui实现侧边导航栏

    编写 client/src/components/LeftMenu.vue ,创建侧边导航栏: 编辑 client/src/views/Index.vue ,引入侧边导航栏:

    2024年02月02日
    浏览(46)
  • element ui表单上传文件

    实现提交表单和上传文件同步进行,把表单数据作为upload组件上传附带的额外参数。 methods:  

    2024年02月16日
    浏览(40)
  • vue2&Element-ui实现表格单元格合并

    由于项目需要实现单元格合并目前只是单页没有做分页处理先上效果图 看下数据结构 Element table提供的api arraySpanMethod columnIndex=0表示从第一列开始 rowIndex表示需要操作的行数 同济医院加上合计有12行从0开始=11 判断条件是rowIndex余12===0 我们打印一下 或者改成 表示从0开始到1

    2024年02月12日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包