angular8スプレッドシートファイルのアップロード、ページのレンダリング（ - ビスアップロードテキストや表を、書き込みの2つの形式があります）

 

 

 

 

 

 

 

 

インポート{コンポーネント、のOnInit、ViewChild、OnDestroy、AfterViewInit}角度/コア@ 'から。
インポート{STColumn、STPage、STComponent}から '@ドロン/ ABC' ; 
インポート{件名}「rxjs」。
インポート{takeUntil} 'rxjs /演算子' 。
輸入 'のxlsx'からXLSXとして* ; 
インポート{NzMessageService、NzNotificationService} 'NG-ゾロ-antd' 。
@Component（{ 
  セレクタ： 'アプリケーション・アイテムワン' 、
  templateUrl： './item-one.component.html' 、
  styleUrls：[」./item-one.component.less' ] 
}）
エクスポートクラスItemOneComponentはAfterViewInit、OnDestroy {実装
  プライベートマイリストを。
  プライベート破壊$ = 新しい件名（）; 
  @ViewChild（ 'ST'、{静的：偽}）ST：STComponent。
  コンストラクタ（プライベートメッセージ：NzMessageService）{} 

  ページ：STPage = { 
    フロント：偽、
    ショー：偽、
  }。
  データ：任意[] =アレイ（2000 ）
    .fill（{}）
    .MAP（（_アイテム：任意、IDX：数） => {
       リターン{ 
        ID：IDX + 1 、
        mysn。~~（Math.random（）* 100 ）
      ;} 
    }）; 
  カラム：STColumn [] = [ 
    {タイトル： '番号'、インデックス： 'ID'、幅： '150ピクセルによって' }、
    {タイトル： 'NO'インデックス： 'mysn'、幅： '250ピクセル' } 
  ]; 

  // アップロードフォーム1。
  myUploadexcel（E）{ 
    にconsole.log（ 'エクセル' ）; 
    にconsole.log（E）; 
  } 
  // アップロード表2 
  // アップロードテキスト1。
  myUploadtxt（E）{ 
    にconsole.log（ 'TXT' ）; 
    にconsole.log（E）; 
    せFileReaderの = 新しい新規FileReaderの（）。
    fileReader.onload=（）=> { 
      にconsole.log（fileReader.result）。
      この .DATA = fileReader.result.toString（）スプリット（/ [\ s]は+ / GM）.MAP（（項目、IDX）=> {
         リターン{ 
          ID：IDX + 1 、
          mysn：項目
        }; 
      }） ; 
    } 
    // fileReader.readAsText（e.target.files [0]、 'UTF-8'） 
    fileReader.readAsText（e.target.files [0 ]）
  } 
  // 上传文本2 
  // 上传表格1 
  readExcel（E） { // 表格导入 
    のconstファイル=のe.target.files。
    console.log（ファイル）; 
    もし（files.length <= 0）{ //何のファイル名が場合は
    返さない 偽; 
    } 他の IF（！.. / \（XLS | XLSX）$ /テスト（ファイル[0 ] .name.toLowerCase（）））{
     この .msg.error（「不正な形式のアップロードXLSXまたはXLS形式を'アップロード）;
     戻り falseに; 
    } 
 
    CONST FileReaderのは = 新しい新規FileReaderの（）; 
    fileReader.onload =（EV：任意）=> {
     試み{ 
        CONSTデータ = ev.target.result; 
        CONSTブック = XLSX.read （データ、{ 
        タイプ： 'バイナリ' 
        }）; 
        CONST WSNAMEWorkbook.SheetNames = [0]; // 最初のテーブル得る 
        ; CONST WS = XLSX.utils.sheet_to_jsonを（workbook.Sheetsが[WSNAME]）// 目次を生成することは、JSON 
        はconsole.log（WS）を、
         この .mylist = [ ]; // クリアデータ受信
        // 編集データの
        ための（VAR ; Iはws.lengthを<I ++はI = 0 ）{
         この.mylist.push（WS [I]）; 
        } 
        // このとき、コンテンツが取得されます処理されるオブジェクトのアレイ 
        はconsole.log（この.mylist）を、
        ARR1のLETは = この .mylist.mapを（_ => Object.values（_）[0 ]）; 
        （ARR1の）はconsole.log; 
 
    } キャッチ（E）{ 
      にconsole.log（ '出错了' ）
         を返す 偽。
    } 
    }。
    fileReader.readAsBinaryString（ファイル[ 0 ]）; 
} 
  // 上传表格2 
  scrollToIndex（インデックス：数）：ボイド{
     この.st.cdkVirtualScrollViewport.scrollToIndex（インデックス）
  } 

  ngAfterViewInit（）：ボイド{
     この .st.cdkVirtualScrollViewport.scrolledIndexChange.pipe（takeUntil（本。.destroyの$））サブスクライブ（データ=> { 
      にconsole.log（ 'スクロールインデックス' 、データ）; 
    }）; 
  }

  ngOnDestroy（）：無効{
     この.destroyの$の.next（）;
    この.destroy $ .complete（）; 
  } 
}

< NZ-ボタングループ[nzSize] = "サイズ" スタイル= "パディング：20ピクセル;表示：フレックス" > 
  < ボタンNZ-ボタン（クリック）= "scrollToIndex（200）" >下拉</ ボタン> 
  < divのスタイル= 「テキスト整列：センター;表示：インラインブロック;オーバーフロー：隠されました;」> 
    < スパンクラス= "FileInputクラスボタン" > 
        < スパンNZ-ボタンnzType = "プライマリ" スタイル= "表示：インラインブロック、行の高さ：30px" >点击上传エクセル文件<
        <input type = "ファイル"（変更）= "myUploadexcel（$イベント）" /> - > 
        < 入力タイプ= "ファイル" （変更）= "readExcel（$イベント）" /> 
    </ スパン> 
</ divの> 
< divのスタイル=「テキスト整列：センター;表示：インラインブロック;オーバーフロー：隠されました;」> 
  < スパンクラス= "FileInputクラスボタン" > 
      < スパンNZ-ボタンnzType = "プライマリ" スタイル= "表示：インラインブロック、行の高さ：30px" >点击上传TXT文件<
      （変化する）= "myUploadtxt（$イベント）" > 
  </ スパン> 
</ DIV > 
</ NZ-ボタングループ> 
< divのクラス= "MYITEM-1-リスト" > 
    < 番目の#st [データ] = "データ" [列] ="列」[ページ] = "ページ" virtualScroll [スクロール] = "{X： '500pxなど'、Y '240ピクセル'}" > </ ST > 
</ DIV >

 

 

.myitemワンリスト { 
    幅：500pxなど。
    /deep/.ng-star-inserted { 
        テキスト整列：センター。
    } 
} 
.fileinputボタン { 
    位置：相対。
    //表示：インラインブロック ; 
    オーバーフロー：隠されました ; 
    カーソル：ポインタ ; 
} 

.fileinputボタン入力 { 
    位置：絶対。
    右：0PX。
    上：-20px ; 
    不透明度：0 ; 
    -ms-フィルタ：'アルファ（不透明度= 0）'。
    フォントサイズ：は50px ; 
}