vue+elementUI导入excel功能

导出效果图

第一步模板下载

 <el-link href="src/template/xxx.xlsx" style="margin-left: 8px;">
          <el-button type="primary">模板下载</el-button>
        </el-link>

第二步:导入

导入控件

<el-upload style="margin-left: 8px;"
          class="upload-demo inline-block margin-right-10"
          action=""
          :on-change="handleChange"
          :show-file-list="false"
          :on-remove="handleRemove"
          :file-list="fileListUpload"
          :limit="limitUpload"
          accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
          :auto-upload="false">
          <el-button  type="primary">导入</el-button>
        </el-upload>

导入方法（excel表上传）

// excel表上传
            handleChange(file, fileList) {
                this.fileTemp = file.raw
                let fileName = file.raw.name
                let fileType = fileName.substring(fileName.lastIndexOf('.') + 1);
                // 判断上传文件格式
                if (this.fileTemp) {
                    if ((fileType == 'xlsx') || (fileType == 'xls')) {
                        this.importf(this.fileTemp)
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '附件格式错误，请删除后重新上传！'
                        })
                    }
                } else {
                    this.$message({
                        type: 'warning',
                        message: '请上传附件！'
                    })
                }
            },

导入方法（excel表上传）

           // excel表上传
            handleChange(file, fileList) {
                this.fileTemp = file.raw
                let fileName = file.raw.name
                let fileType = fileName.substring(fileName.lastIndexOf('.') + 1);
                // 判断上传文件格式
                if (this.fileTemp) {
                    if ((fileType == 'xlsx') || (fileType == 'xls')) {
                        this.importf(this.fileTemp)
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '附件格式错误，请删除后重新上传！'
                        })
                    }
                } else {
                    this.$message({
                        type: 'warning',
                        message: '请上传附件！'
                    })
                }
            },

导入方法（移除excel表）

            // 移除excel表
            handleRemove(file, fileList) {
                this.fileTemp = null
            }

fileListUpload: [],
limitUpload: 3,
disabled: false,
accountList:[],

导入确认弹窗

导入确认弹窗代码

<el-dialog
      title="导入数据(XXX)"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
      center>
      <el-table
        :data="accountList"
        border
        style="width: 100%;">
        <el-table-column
          prop="xxx"
          header-align="center"
          align="center"
          label="XXX">
        </el-table-column>
        <el-table-column
          prop="xxx"
          header-align="center"
          align="center"
          label="XXX">
        </el-table-column>
        <el-table-column
          prop="xxx"
          header-align="center"
          align="center"
          label="XXX">
        </el-table-column>
        <el-table-column
          prop="xxx"
          header-align="center"
          align="center"
          label="XXX">
        </el-table-column>
        <el-table-column
          prop="xxx"
          header-align="center"
          align="center"
          label="XXX">
        </el-table-column>
        <el-table-column
          prop="xxx"
          header-align="center"
          align="center"
          label="XXX">
        </el-table-column>
        <el-table-column
          prop="xxx"
          header-align="center"
          align="center"
          label="XXX">
        </el-table-column>
        <el-table-column
          prop="xxx"
          header-align="center"
          align="center"
          label="XXX">
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="importExcel()">确 定</el-button>
  </span>
    </el-dialog>

点击确认执行的方法

importExcel(){
                this.$http({
                    url: XXXX',
                    method: 'post',
                    data: this.accountList
                }).then(({data}) => {
                    if (data && data.code === 0) {
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 1500
                        })
                        this.getDataList()
                    }
                })
                this.dialogVisible = false;
            }

后台接口定义

    @RequestMapping("/XXXl")
    public RestResponse importExcelXXX(@RequestBody List<xxx>  businessRiskManageEntities) {
        xxx.importExcelXX(xxx);
        return RestResponse.success();
    }

点击取消执行的方法

handleClose(done) {
                this.dialogVisible = false;
            },

导入的方法

//导入的方法
            importf(obj) {
                this.dialogVisible = true;
                let _this = this;
                let inputDOM = this.$refs.inputer;   // 通过DOM取文件数据
                this.file = event.currentTarget.files[0];
                var rABS = false; //是否将文件读取为二进制字符串
                var f = this.file;
                var reader = new FileReader();
                //if (!FileReader.prototype.readAsBinaryString) {
                FileReader.prototype.readAsBinaryString = function (f) {
                    var binary = "";
                    var rABS = false; //是否将文件读取为二进制字符串
                    var pt = this;
                    var wb; //读取完成的数据
                    var outdata;
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var bytes = new Uint8Array(reader.result);
                        var length = bytes.byteLength;
                        for (var i = 0; i < length; i++) {
                            binary += String.fromCharCode(bytes[i]);
                        }
                        var XLSX = require('xlsx');
                        if (rABS) {
                            wb = XLSX.read(btoa(fixdata(binary)), { //手动转化
                                type: 'base64'
                            });
                        } else {
                            wb = XLSX.read(binary, {
                                type: 'binary'
                            });
                        }
                        // outdata就是你想要的东西 excel导入的数据
                        outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
                        // excel 数据再处理
                        let arr = []
                        outdata.map(v => {
                            // let jsonString = JSON.stringify(v).replace(/\*/g, '').replace(/\s/ig,'');
                            let jsonString = JSON.stringify(v).replace(/\//g, '').replace(/\s/ig,'');
                            debugger;
                            console.log(jsonString);
                            v = JSON.parse(jsonString);
                            let obj = {}
                            //xxx代表列名
                            obj.riskType = v.xxx
                            obj.riskDescription = v.xxx
                            obj.typeAccident = v.xxx
                            obj.riskLevel = v.xxx
                            obj.controlMeasures = v.xxx
                            obj.hierarchyManage = v.xxx
                            obj.orgLiableDict = v.xxx
                            obj.personLiableDict = v.xxx
                            // obj.id = v.id
                            arr.push(obj)
                        })
                        _this.accountList = [...arr];
                    }
                    reader.readAsArrayBuffer(f);
                }
                if (rABS) {
                    reader.readAsArrayBuffer(f);
                } else {
                    reader.readAsBinaryString(f);
                }
            },