Vue+Element前端导入Excel

业务场景

由前台导入Excel表格，获取批量数据。

根据一个数组导出Excel表格。

引入工具库

npm install -S file-saver xlsx

npm install -D script-loader

导入Excel

    class="upload-demo"

    action=""

    :on-change="handleChange"

    :on-exceed="handleExceed"

    :on-remove="handleRemove"

    :file-list="fileListUpload"

    :limit="limitUpload"

    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"

    :auto-upload="false">

    点击上传

   

只 能 上 传 xlsx / xls 文 件

limitUpload = 1限制只能上传1个文件

accept为默认打开的可上传的文件格式

handleChange(file, fileList){

    this.fileTemp = file.raw

},

handleRemove(file,fileList){

    this.fileTemp = null

},

fileTemp这里定义了一下变量，指向最新上传的附件，起始定义为null。

这里发现控件file.raw是我们要用的File类型。

导入判断

if(this.fileTemp){

    if((this.fileTemp.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') || (this.fileTemp.type == 'application/vnd.ms-excel')){

        this.importfxx(this.fileTemp)

    } else {

        this.$message({

            type:'warning',

            message:'附件格式错误，请删除后重新上传！'

        })

    }

} else {

    this.$message({

        type:'warning',

        message:'请上传附件！'

    })

}

导入函数

importfxx(obj) {

    let _this = this;

    // 通过DOM取文件数据

    this.file = obj

    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 = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);//outdata就是你想要的东西

            this.da = [...outdata]

            let arr = []

            this.da.map(v => {

                let obj = {}

                obj.code = v['设备ID']

                obj.type = v['设备型号']

                arr.push(obj)

            })

            return arr

        }

        reader.readAsArrayBuffer(f);

    }

    if(rABS) {

        reader.readAsArrayBuffer(f);

    } else {

        reader.readAsBinaryString(f);

    }

}

arr就是我们要的结果，是一个数组。每一个值是个对象，包含了code type两个属性。

参考：

vue中使用excel导入导出 - LGW0 - 博客园

vue2.0 导出Excel表格数据 - 菜鸟正在进化 - 博客园

出处：

Vue+Element前端导入导出Excel - 掘金