文章目录

  • 前言
  • 一、引入组件
  • 二、封装导入功能的组件
    • 1.编写组件template
    • 2.获取数据
    • 3.调用接口把数据传给后端
  • 三、总结

前言

继前边的vue的导出功能后,自己又去在网上搜了vue导入excel一些文章,自己通过对代码的整理和调整,实现了vue导入excel的功能。


一、主界面先引入导入组件

1.这段主要是中间的那段excel-import标签的那部分代码,loadList是后边导入成功后,子组件要调用的方法,这个方法是导入成功后,刷新表格数据的

                                                          修改                                                  导出                                                        发放                            

路径根据你们的要求自行修改

import excelImport from "../../components/excel-import"

二、封装excel-import组件

1.首先是template代码(这里用的是ant vue desgin框架的组件)

            导入                                    

仅允许导入xls、xlsx格式文件

2.引入接口

import WelfareApi from '@/api/master/welfare'

3.js代码methods

exportData(){                this.visible=true            },          async handleOk(){                if (this.data.length === 0) {                    this.$message.error("请选择要上传的文件")                } else {                    const data=await WelfareApi.importExcelData(this.data)                    this.$message.success(data.message)                    this.visible=false;                    this.fileList=[]                    this.$emit('fatherMethod');                }            },            handleCancel(){            this.fileList=[]            this.visible=false            },            // 文件上传前的钩子            beforeUpload(file) {                const isXslx =                    file.type ===                    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" || file.type === "application/vnd.ms-excel";                const isLt2M = file.size / 1024 / 1024 < 2;                if (!isXslx) {                    this.$message.error("附件格式错误,请删除后重新上传!");                }                if (isXslx) {                    if (this.fileList.length == 0) {                        this.fileList = [...this.fileList, file]                        this.importfxx(this.fileList);                    } else {                        this.$message.error("仅能选择一个文件进行上传!")                    }                }                if (!isLt2M) {                    this.$message.error("上传文件大小不能超过 2MB!");                }                return false            },            removeFile(file) {                const index = this.fileList.indexOf(file);                const newFileList = this.fileList.slice();                newFileList.splice(index, 1);                this.fileList = newFileList;            },            importfxx(obj) {                let _this = this;                let inputDOM = this.$refs.inputer;                // 通过DOM取文件数据                this.file = event.currentTarget.files[0];                let rABS = false; //是否将文件读取为二进制字符串                let f = this.file;                let reader = new FileReader();                FileReader.prototype.readAsBinaryString = function (f) {                    let binary = "";                    let rABS = false; //是否将文件读取为二进制字符串                    let pt = this;                    let wb; //读取完成的数据                    let outdata;                    let reader = new FileReader();                    reader.onload = function (e) {                        let bytes = new Uint8Array(reader.result);                        let length = bytes.byteLength;                        for (let i = 0; i  {                            let obj = {}                            obj.id = v['序号']                            obj.dpStage = v['DP班号']                            obj.traineeName = v['学员姓名']                            obj.name = v['收货人姓名']                            obj.mobile = v['收货人电话']                            obj.province = v['省']                            obj.city = v['市']                            obj.district = v['区']                            obj.detailAddr = v['详细地址']                            obj.expressName = v['快递名称']                            obj.expressNumber = v['快递编号']                            obj.expressTime = v['发货时间']                            obj.statusName = v['状态']                            arr.push(obj)                        });                        _this.data=arr;                        _this.dalen=arr.length;                        return arr;                    };                    reader.readAsArrayBuffer(f);                };                if (rABS) {                    reader.readAsArrayBuffer(f);                } else {                    reader.readAsBinaryString(f);                }            }

这里有几点注意的地方

在对outdata处理的时候,例如obj.id=v[‘序号’]

这里的id就是传给后端的对象集合中对象的属性名,后端也要用对应的model接收

这里的序号就是excel表格的表头列名,一定要文字对应,不然会导入失败

三.附加提示(后端也要写的小伙伴可以参考下边建议哈)

我们传给后端的数据,应该是一个集合形式,在后端一般需要对数据进行处理,因为我们要把数据insert到我们的数据库中去,当然可能会有重复的数据(比如说导入的是用户信息,数据库里存在这个人的,你要导入的excel也存在)如果要求是修改的话,这时候就要根据的唯一标识(id,或者是电话、身份证号等等)来分情况做处理到底是新增还是修改。最后我还建议可以设置两个变量,一个来记录成功导入数据库的记录数量,一个记录覆盖(修改)记录的数量,然后返回给前端。


四.总结

以上就是今天要讲的内容,本文介绍了vue导入excel的使用,主要就是在前端把要导入的excel进行处理,最后把整理好的数据传给后端,添加进数据库中。谢谢小伙伴的观看!