Excel Upload文件上传、UI解析

image.png

input标签中type为file显示的是比较传统的file上传UI标签。

     {{fileName}}
     Choose xlsx/xls file (max file size 10M)...
     
     

// scss:
.upload-file{
  border: 1px solid #CCCCCC;
  padding-left: 10px;
  height: 34px;
  line-height: 34px;
  position: relative;
  background: #FFFFFF;
  margin-bottom: 20px;
  &:hover {
    cursor: pointer;
  }
}
.placeholder{
  color: #999999;
}
.file-icon{
  position: absolute;
  right: 10px;
  top: 10px;
}
.file{
  position: absolute;
  width: 100%;
  top:0;
  left: 0;
  bottom: 0;
  display: none;
}

// ts:
getFile(event) {
  // 获取上传文件的name
  this.fileName = event.target.files[0].name;
  // 获取文件的type
  const fileType = this.fileName.substring(this.fileName.lastIndexOf('.') + 1).toLowerCase();
  const reader: FileReader = new FileReader();
  // size 的单位转换为M
  let size = event.target.files[0].size; // byte
  size = size / 1024; // kb
  size = size / 1024; // mb
  //解析文件
  reader.onload = (e: any) => {
     const bstr: string = e.target.result;
     const wb: XLSX.WorkBook = XLSX.read(bstr, {type: 'binary'});
     const firstSheet: string = wb.SheetNames[0];
     const ws: XLSX.WorkSheet = wb.Sheets[firstSheet];
     // 去掉字段名的空格及* 
     ws.A1.w = ws.A1.w.replace(/\s/g, '');
     ws.A1.w = ws.A1.w.replace('*', '');
     ....（省略其他标签的操作，重复代码）
     const data: FileData[] = XLSX.utils.sheet_to_json(ws);
     // data即为获取的解析的数据
  }
}