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

实现代码如下

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

 

原文地址:https://www.cnblogs.com/sugartang/p/11415655.html

时间: 2024-10-15 16:35:07

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

js 弹出窗口 防止拦截,突破阻止,保存后打开

<script language="javascript"> function orderprint() { var formUrl = "savedata_url"; var formPrint ="";//保存成功后要弹出的窗口 $.ajax({ url: formUrl, data: $('#form1').serialize(), dataType: "html", async:false,//------

JS弹出窗口代码大全(详细整理)

1.弹启一个全屏窗口 复制代码代码如下: <html> <body http://www.jb51.net','脚本之家','fullscreen');">; <b>www.jb51.net</b> </body> </html> 2.弹启一个被F11化后的窗口 复制代码代码如下: <html> <body 'http://www.jb51.net','脚本之家','channelmode');"

文件上传小技巧/后端处理【php篇】

引语:在上一篇文章中说到,在页面中可以用隐藏的方式让你的上传页面看起来漂亮.但是这对于性能来说,并没有什么卵用,那么在后台的处理中,难道就没有一些处理技巧么?所谓后台的技巧,应该要包括上传得快一点,上传的文件大一点!那么,本文就来说说,后端处理都有些什么技巧吧! 业务场景一.我们只会选择一个单个的文件上传,而且不需要做一些即时的验证工作.那么,也许并没有什么优化可言了,因为,最后你要做的,只是将这个文件放在表单里最后一起提交,直接处理即可! 业务场景二.需要上传多个文件,而且需要时时验证文件内部

jsp网页弹出窗口的多种办法

http://blog.csdn.net/huangfoxjava/article/details/2973033 登录|注册     huangfoxjava的专栏 目录视图 摘要视图 订阅 关于jsp网页弹出窗口[很多种方法......] 分类: JSP2008-09-24 14:22 5799人阅读 评论(0) 收藏 举报 jspjavascript框架html脚本浏览器 各种弹出页面的设计 [1.普通的弹出窗口] 其实代码非常简单: <SCRIPT LANGUAGE=javascript

asp .NET弹出窗口 汇总(精华,麒麟创想)

asp .NET弹出窗口 汇总(精华,麒麟创想) 注://关闭,父窗口弹出对话框,子窗口直接关闭 this.Response.Write("<script language=javascript>window.close();</script>"); //关闭,父窗口和子窗口都不弹出对话框,直接关闭 this.Response.Write("<script>");this.Response.Write("{top.ope

CKFinder 弹出窗口操作并设置回调函数

CKFinder 弹出窗口操作并设置回调函数 官方例子参考CKFinderJava-2.4.1/ckfinder/_samples/popup.html 写一个与EXT集成的小例子 Ext.define("MyButton", { extend : "Ext.Button", text : "ckfinder", initComponent : function() { var me = this; Ext.apply(me, { handler

[技术]打开网页弹出窗口的代码

经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,通常在这个窗口里会显示一些注意事项.版权信息.警告.欢迎光顾之类的话或者作者想要特别提示的信息.其实制作这样的页面效果非常的容易,只要往该页面的html里加入几段javascript代码即可实现.下面俺就带您剖析它的奥秘. [1.最基本的弹出窗口代码] 其实代码非常简单: <script language="javascript"> <!-- window.open ('pa

asp .NET弹出窗口汇总

注://关闭,父窗口弹出对话框,子窗口直接关闭 this.Response.Write("<script language=javascript>window.close();</script>"); //关闭,父窗口和子窗口都不弹出对话框,直接关闭 this.Response.Write("<script>");this.Response.Write("{top.opener =null;top.close();}&q

jquery Jbox 插件实现弹出窗口在修改的数据之后,关闭弹出窗口刷新父页面的问题

http://blog.csdn.net/nsdnresponsibility/article/details/51282797 问题如题: 这里我们在父页面定义一个全局的变量来标识是否需要刷新父页面(声明:下图中点击保存页面之后,不关闭子页面):点击1出弹出窗口: 我们的目的是:如果,用户保存过数据:在点击关闭按钮和2处所指的小X时,刷新父列表页面:若果用户没有保存过数据,关闭窗口是不刷新父列表页面. //这里是父页面(列表页面) var isFreshFlag="1";<%-