vue中批量导入excel并获取数据

1、引入依赖

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

2、在main.js中引入XLSX

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

3、页面中放一个批量导入的按钮

<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>

4、data里面定义

data() {
    return {
      //批量上传
      limitUpload:1,
      fileTemp:null,
      file:null,
      //存放excel的数组
      da:[],
      dalen:0
    }
  },

5、methods里面写方法

//批量上传
    handleChange(file, fileList){
        this.fileTemp = file.raw;
        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:'请上传附件！'
            })
        }
    },
    handleExceed(){
        this.$message({
            type:'warning',
            message:'超出最大上传文件数量的限制！'
        })
        return;
    },
    handleRemove(file,fileList){
        this.fileTemp = null
    },
    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]);
                }
                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就是你想要的东西
                console.log(outdata);
                //此处可对数据进行处理
                let arr = [];
                outdata.map(v => {
                    let obj = {}
                    obj.invoicedNo = v['发票号']
                    obj.invoiceMount = v['发票金额']
                    obj.invoiceName = v['附件名称']
                    arr.push(obj)
                });
                _this.da=arr;
                _this.dalen=arr.length;
                _this.invoiceOpt.invoicedNo=_this.da[0].invoicedNo
                console.log(_this.invoiceOpt.invoicedNo)
                return arr;

            };
            reader.readAsArrayBuffer(f);

        };
        if (rABS) {
            reader.readAsArrayBuffer(f);
        } else {
            reader.readAsBinaryString(f);
        }
    },

 6、获取的数据如下

此篇为记录，原博文为Vue中如何导入并读取Excel数据_a736755244的博客-CSDN博客_vue导入excel数据