vue+element导入并读取excel内容

vue+element导入并读取excel内容

1.安装依赖

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

2.在src目录下新建一个js文件夹引入Blob.js和expor2Excal.js

3.在main.js里引入

//引入导出excel的js文件
import Blob from './js/Blob'
import Export2Excel from './js/Export2Excel'

4.在template里引入el-upload组件，点击button上传

<template>
<el-upload
         class="upload-demo"
         action=""
         :on-change="handleChange"//文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
         :on-exceed="handleExceed" //文件超出个数限制时的钩子
         :on-remove="handleRemove" //文件列表移除文件时的钩子
         :before-remove="beforeRemove"
         :file-list="fileListUpload"
         :limit="1"  //一次上传1个文件
         ref="upload"			           		
         accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
        :auto-upload="false">
<el-button size="small" type="primary" >
	导入
</el-button>
 </el-upload>
 </template>

5.在data里

 
    data() {
      return {
		fileListUpload:[],
		fileTemp:null,
		}
	

6.在methods

methods:{
handleRemove(file,fileList){
      this.fileTemp = null
    },
beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
handleExceed(files, fileList){
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`); 
    },
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:'请上传附件！'
            })
        }
    },
 importfxx(res){
            let _this = this;
            let inputDOM = this.$refs.inputer;
            // 通过DOM取文件数据
            
         
            this.file = event.currentTarget.files[0];
            console.log( event.currentTarget)
    
            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')
                     let arr = [];
                    outdata.map(v => {
                        let t=String(v['id'])
                        if(t.length>='11'){
                            t=t.substring(0,11)
                        }
                        arr.push(t)
                    });
                    // _this.da=arr;
                    // _this.dalen=arr.length;
                    console.log(arr,'arr')
                    
                    return arr;
                };
                reader.readAsArrayBuffer(f);
            };
            if (rABS) {
                reader.readAsArrayBuffer(f);
            } else {
                reader.readAsBinaryString(f);
            }
    },
}