angular小练习--手写弹出窗口以及文件上传或者复制粘贴,后读取打印文件内容
阅读原文时间:2023年07月08日阅读:1

实现代码如下

选项一 选项一
请把SN贴入下框 X
或者
点击上传文件

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;
}

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章