angular小练习--手写弹出窗口以及文件上传或者复制粘贴，后读取打印文件内容

Posted 2022-08-30 sugartang

 

 

 

 

 

 

 

实现代码如下

<page-header>
  <ng-template>
  </ng-template>
</page-header>
<div>
  <nz-button-group>
    <button nz-button nzType="primary">新增</button>
    <button nz-button>编辑</button>
    <button nz-button (click)="myBlackBoxChange=true">打开黑框</button>

    <button nz-button>删除</button>
    <button nz-button nzType="default">刷新</button>
    <button nz-button nzType="default">保存</button>
  </nz-button-group>
  <nz-button-group>
    <button nz-button nzType="primary"><i nz-icon nzType="left"></i>上一个</button>
    <button nz-button nzType="primary">下一个<i nz-icon nzType="right"></i></button>
  </nz-button-group>
</div>
<div se-container="1" class="mybox">
    <div class="left-box">
            <se label="单号选择">
                    <nz-select [(ngModel)]="mystatus"  [nzPlaceHolder]="‘请选择‘" class="myselect">
                        <nz-option *ngFor="let i of status; let idx = index" [nzLabel]="i.text" [nzValue]="idx"></nz-option>
                    </nz-select>
                  </se>
                  <se label="单号选择">
                    <nz-select [(ngModel)]="mystatus" name="status" id="status" [nzPlaceHolder]="‘请选择‘" [nzShowSearch]="true" class="myselect">
                      <nz-option >选项一</nz-option>
                    </nz-select>
                  </se>
                  <se label="单号选择">
                    <nz-select [(ngModel)]="mystatus" name="status" id="status" [nzPlaceHolder]="‘请选择‘" [nzShowSearch]="true" class="myselect">
                        <nz-option >选项一</nz-option>
                    </nz-select>
                  </se>
    </div>
</div>
<div class="myBlack" *ngIf="myBlackBoxChange"  >
      <nz-card class="myBlackBox">
        <div style="position: relative; ">请把SN贴入下框
          <span style="position:absolute; 
          right: -14px;
          top: -24px;
          cursor: pointer;
          " (click)="myBlackBoxChange=false">X</span>
        </div>
        <textarea rows="8" nz-input [(ngModel)]="myinputValue"></textarea>
        <div style="text-align: center;margin-top:10px;line-height: 50px">
          <span>请</span>
        <button nz-button  (click)="loadTwo()" [nzLoading]="isLoadingTwo" style="z-index: 9999">
            <i nz-icon nzType="poweroff"></i>确认提交
          </button>
          <span>或者</span>
          <div style="text-align: center;display:inline-block;line-height: 50px">
              <span class=" fileinput-button">
                  <span nz-button nzType="primary" style="display:inline-block;line-height: 30px">点击上传文件</span>
                  <input type="file" (change)="myUpload($event)">
              </span>
          </div>
        </div>
      </nz-card>

</div>

import  Component, OnInit, ViewChild, TemplateRef, ChangeDetectionStrategy, ChangeDetectorRef  from ‘@angular/core‘;
import  NzMessageService, NzModalService  from ‘ng-zorro-antd‘;
import  _HttpClient  from ‘@delon/theme‘;
import  tap, map  from ‘rxjs/operators‘;
import Clipboard from ‘../../../../clipboard.min.js‘;
import  STComponent, STColumn, STData, STChange  from ‘@delon/abc‘;


@Component(
  selector: ‘app-wlblock‘,
  templateUrl: ‘./wlblock.component.html‘,
  styleUrls: [‘./wlblock.component.less‘]
)
export class WlblockComponent implements OnInit 
  private status = [];
  private mystatus;
  private myData2;
  private myData;
  private myBlackBoxChange:boolean = false;
  isLoadingTwo = false;

  private myinputValue;
  constructor(private http:_HttpClient )  

  ngOnInit() //初始化时候，异步请求服务器端的首页数据
    let url=‘http://localhost:4200/assets/myjson/mydata.json‘;
    this.http.get(url).subscribe((res:any)=>
      this.status=res.data1
      console.log(this.status)
    )
  
  myclick(e:MouseEvent)
    e.preventDefault();
    console.log(e)
  
  getData1(e)
    var clipboard = new Clipboard(‘btn‘);
 
clipboard.on(‘success‘, function(e) 
    console.info(‘Action:‘, e.action);
    console.info(‘Text:‘, e.text);
    console.info(‘Trigger:‘, e.trigger);
    e.clearSelection();
);
 
clipboard.on(‘error‘, function(e) 
    console.error(‘Action:‘, e.action);
    console.error(‘Trigger:‘, e.trigger);
);
  
  loadTwo(): void 
    this.isLoadingTwo = true;
    setTimeout(() => 
      this.isLoadingTwo = false;
    , 5000);
    console.log(this.myinputValue)
  

  myUpload(e)
    console.log(e)
    let fileReader = new FileReader();
    fileReader.onload=()=>
      console.log(fileReader.result)
    
    // fileReader.readAsText(e.target.files[0], ‘utf-8‘)
    fileReader.readAsText(e.target.files[0])
  

　　

　　

　

.mybox
    display:flex;
    justify-content: center;
    align-items: center;
    padding-top:30px;
    .left-box,.right-box
        width:50%;
        min-width: 350px;
        clear: both;
    
    
    .myselect
        width:200px;
    

.myBlack
    width: 100%;
    height: 100vh;
    position: absolute;
    left:0;
    top:0;
    background-color: rgba(0,0,0,0.4);
    .myBlackBox
        width: 600px;
        height: 350px;
        position: absolute;
        left:50%;
        top:50%;
        margin:-150px 0 0 -200px;
    


textarea
    resize: none;

.fileinput-button 
    position: relative;
    // display: inline-block;
    overflow: hidden;
    cursor: pointer;


.fileinput-button input
    position:absolute;
    right: 0px;
    top: 0px;
    opacity: 0;
    -ms-filter: ‘alpha(opacity=0)‘;
    font-size: 30px;