vue配合element 导入excel数据（直接copy就完事了）

效果：

 excel格式：

首先下载第三方插件：

 npm install -S file-saver xlsx
 
 npm install -D script-loader

引入：

import XLSX from 'xlsx'
Vue.use(XLSX)

使用：

templete:

<el-upload class="upload-demo" action="" :on-change="handleChange" :on-remove="handleRemove" :on-exceed="handleExceed" :limit="limitUpload" accept="application/vnd.openxmlformats-  
officedocument.spreadsheetml.sheet,application/vnd.ms-excel" :auto-upload="false">
    <el-button size="small" type="primary">点击上传</el-button>
</el-upload>
<el-table :data="da" style="width: 100%">
    <el-table-column prop="code" label="KOL" width="180">
    </el-table-column>
    <el-table-column prop="name" label="品牌" width="180">
    </el-table-column>
    <el-table-column prop="pro" label="录入者">
    </el-table-column>
    <el-table-column prop="cit" label="执行时间">
    </el-table-column>
    <el-table-column prop="dis" label="车型">
    </el-table-column>
</el-table>

data:

 limitUpload: 1,
 da: [],
 dalen: ''

methods:

//上传文件时处理方法  
handleChange(file, fileList) {
    this.fileTemp = file.raw;
    if (this.fileTemp) {
        if ((this.fileTemp.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.she
            (this.fileTemp.type == 'application/vnd.ms-excel')) {
            this.importfxx(this.fileTemp);
        } else {
            this.$message({
                type: 'warning',
                message: '附件格式错误，请删除后重新上传！'
            })
        }
    } else {
        this.$message({
            type: 'warning',
            message: '请上传附件！'
        })
    }
},
//超出最大上传文件数量时的处理方法
handleExceed() {
    this.$message({
        type: 'warning',
        message: '超出最大上传文件数量的限制！'
    })
    return;
},
//移除文件的操作方法
handleRemove(file, fileList) {
    this.fileTemp = null
},

//这个是对导入的excel进行处理
importfxx(obj) {
    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]);
            }
            //此处引入，用于解析excel
            var XLSX = require("xlsx");
            if (rABS) {
                wb = XLSX.read(btoa(fixdata(binary)), {
                    //手动转化
                    type: "base64"
                });
            } else {
                wb = XLSX.read(binary, {
                    type: "binary"
                });
            }
            outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
            console.log("outdata:", outdata)
            //outdata就是读取的数据（不包含标题行即表头，表头会作为对象的下标）
            //此处可对数据进行处理
            //根据excel的键值把它塞到arr里
            let arr = [];
            outdata.map(v => {
                let obj = {}
                obj.code = v['KOL']
                obj.name = v['品牌']
                obj.pro = v['录入者']
                obj.cit = v['执行时间']
                obj.dis = v['车型']
                arr.push(obj)
            });
            _this.da = arr;
            _this.dalen = arr.length;
            return arr;
        };
        reader.readAsArrayBuffer(f);
    };
    if (rABS) {
        reader.readAsArrayBuffer(f);
    } else {
        reader.readAsBinaryString(f);
    }
}

主要参考了这篇文章：

Vue中如何导入并读取Excel数据_a736755244的博客-CSDN博客_vue导入excel数据vue+xlsx导入excel并读取数据https://blog.csdn.net/a736755244/article/details/99568133