angular8表格文件上传并渲染到页面（上传文本与表格，表格有两种写法--之二）

 

 

 

import { Component, OnInit , ViewChild, OnDestroy, AfterViewInit } from '@angular/core';
import { STColumn, STPage, STComponent } from '@delon/abc';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import * as XLSX from 'xlsx';
import { NzMessageService, NzNotificationService } from 'ng-zorro-antd';
@Component({
  selector: 'app-item-one',
  templateUrl: './item-one.component.html',
  styleUrls: ['./item-one.component.less']
})
export class ItemOneComponent implements AfterViewInit, OnDestroy {
  private mylist;
  private destroy$ = new Subject();
  @ViewChild('st', { static: false }) st: STComponent;
  constructor(private msg:NzMessageService) {}

  page: STPage = {
    front: false,
    show: false,
  };
  data: any[] = Array(2000)
    .fill({})
    .map((_item: any, idx: number) => {
      return {
        id: idx + 1,
        mysn: ~~(Math.random() * 100),
      };
    });
  columns: STColumn[] = [
    { title: '编号', index: 'id',  '150px' },
    { title: '货号', index: 'mysn',  '250px' }
  ];

  // 上传表格1
  myUploadexcel(e){
    console.log('excel');
    console.log(e);
  }
  // 上传表格2
  // 上传文本1
  myUploadtxt(e){
    console.log('txt');
    console.log(e);
    let fileReader = new FileReader();
    fileReader.onload=()=>{
      console.log(fileReader.result);
      this.data=fileReader.result.toString().split(/[s]+/gm).map((item,idx)=>{
        return {
          id: idx + 1,
          mysn: item,
        };
      });
    }
    // fileReader.readAsText(e.target.files[0], 'utf-8')
    fileReader.readAsText(e.target.files[0])
  }
  // 上传文本2
  // 上传表格1
  readExcel(e) {//表格导入
    const files = e.target.files;
    console.log(files);
    if(files.length<=0){//如果没有文件名
    return false;
    }else if(!/.(xls|xlsx)$/.test(files[0].name.toLowerCase())){
    this.msg.error('上传格式不正确，请上传xls或者xlsx格式');
    return false;
    }
 
    const fileReader = new FileReader();
    fileReader.onload = (ev:any) => {
    try {
        const data = ev.target.result;
        const workbook = XLSX.read(data, {
        type: 'binary'
        });
        const wsname = workbook.SheetNames[0];//取第一张表
        const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);//生成json表格内容
        console.log(ws);
        this.mylist = [];//清空接收数据
        //编辑数据
        for(var i= 0;i<ws.length;i++){
        this.mylist.push(ws[i]);
        }
        // 此时得到的是一个内容是对象的数组需要处理
        console.log(this.mylist);
        let arr1=this.mylist.map(_=>Object.values(_)[0]);
        console.log(arr1);
 
    } catch (e) {
      console.log('出错了')
        return false;
    }
    };
    fileReader.readAsBinaryString(files[0]);
}
  // 上传表格2
  scrollToIndex(index: number): void {
    this.st.cdkVirtualScrollViewport.scrollToIndex(index);
  }

  ngAfterViewInit(): void {
    this.st.cdkVirtualScrollViewport.scrolledIndexChange.pipe(takeUntil(this.destroy$)).subscribe(data => {
      console.log('scroll index to', data);
    });
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

<nz-button-group [nzSize]="size" style="padding:20px;display:flex">
  <button nz-button (click)="scrollToIndex(200)">下拉</button>
  <div style="text-align: center;display:inline-block;overflow: hidden;">
    <span class=" fileinput-button">
        <span nz-button nzType="primary" style="display:inline-block;line-height: 30px">点击上传excel文件</span>
        <!-- <input type="file" (change)="myUploadexcel($event)"/> -->
        <input type="file" (change)="readExcel($event)"/>
    </span>
</div>
<div style="text-align: center;display:inline-block;overflow: hidden;">
  <span class=" fileinput-button">
      <span nz-button nzType="primary" style="display:inline-block;line-height: 30px">点击上传txt文件</span>
      <input type="file" (change)="myUploadtxt($event)">
  </span>
</div>
</nz-button-group>
<div class="myitem-one-list">
    <st #st [data]="data" [columns]="columns" [page]="page" virtualScroll [scroll]="{ x: '500px', y: '240px' }"></st>
</div>

.myitem-one-list{
    width: 500px;
    /deep/.ng-star-inserted{
        text-align: center;
    }
}
.fileinput-button {
    position: relative;
    // display: inline-block;
    overflow: hidden;
    cursor: pointer;
}

.fileinput-button input{
    position:absolute;
    right: 0px;
    top: -20px;
    opacity: 0;
    -ms-filter: 'alpha(opacity=0)';
    font-size: 50px;
}