angular8 spreadsheet file upload and render the page (upload text and tables, there are two forms of writing - bis)

 

 

 

 

 

 

 

 

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: 'number', index: 'ID', width: 'by 150px' }, 
    {title: 'NO' , index: 'mysn', width: '250px' } 
  ]; 

  // Upload form. 1 
  myUploadexcel (E) { 
    the console.log ( 'Excel' ); 
    the console.log (E); 
  } 
  // upload table 2 
  // upload text. 1 
  myUploadtxt (E) { 
    the console.log ( 'TXT' ); 
    the console.log (E); 
    the let FileReader = new new the 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){//If no filename 
    return  false ; 
    } the else  IF (!.. / \ (XLS | XLSX) $ / the Test (Files [0 ] .name.toLowerCase ())) {
     the this .msg.error ( 'upload malformed Upload xlsx or xls format ' );
     return  to false ; 
    } 
 
    const FileReader = new new the FileReader (); 
    fileReader.onload = (EV: the any) => {
     the try { 
        const Data = ev.target.result; 
        const Workbook = XLSX.read (Data, { 
        type: 'binary' 
        }); 
        const wsnameWorkbook.SheetNames = [0]; // get the first table 
        const WS = XLSX.utils.sheet_to_json (workbook.Sheets [wsname]); // generating a table of contents json 
        the console.log (WS);
         the this .mylist = [ ]; // Clear receive data 
        // edit data 
        for ( var I = 0; I <ws.length; I ++ ) {
         the this .mylist.push (WS [I]); 
        } 
        // At this time, a content is obtained an array of objects to be handled 
        the console.log ( the this .mylist); 
        the let of arr1 = the this .mylist.map (_ => Object.values (_) [0 ]); 
        the console.log (of arr1); 
 
    } the 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;
}