angular 上传excel 与下载excel

上传附件

<div class="layui-inline">
   <se label="指示書附件" error="請輸入指定路徑" required *ngIf="type!='indicate'&&type!='indicate_npi'">
     <button style="width:25%;text-align: center" nz-button (click)="uploadExcel0.click()" nzType="primary"
       type="primary">上傳</button>
     <input nz-input [(ngModel)]="q.file_url" name="file_url" style="width:148px" placeholder="请上传附件" />
     <input #uploadExcel0 type="file" id="inputFileurl" hidden (change)="change($event)">
   </se>
 </div>

 // 上傳附件
change(e:Event){  
    
    if(this.q.formId==''||this.q.formId==undefined){
      this.msg.error('未保存資料不能執行上傳附件操作！');
      return;
    }
    const files = (e.target as HTMLInputElement).files![0];
   var  data:any = new FormData();

   data.append('file',files);
    data.append('file_id',this.q.file_id);
    data.append('file_type','dcc');
    data.append('form_id',this.q.formId);
    this.http
    .post(webApiUrls.baseDcc.attachUpload, data,{
      reportProgress: true,
      observable: 'events',
    }
    ).subscribe(res=>{
      if(res.status=='200'){
        this.msg.success('上传成功！');
        this.http.post(webApiUrls.baseDcc.openExcel+this.q.formId).subscribe(res=>{
          if(res.status!='200'){
            this.msg.error(res.message);
            return;
          }
          this.uploadData=res.data;
        })
        return;
      }
     this.msg.error('上传失败,请联系MES admin!')
    })
  }// 附件上传

下载excel

 uploadcolumns:STColumn[]=[
  {title:'表單編號',index: 'formId',},
  {title:'項次',index: 'count'},
  {title:'原附件名稱',index: 'fileUpName'},
  {title:'上傳後附件名稱',index: 'fileSysName'},
  {title:'文件大小',index: 'fileContentlength'},
  {title:'上傳時間',index: 'createDate',type:'date'},
  {title:'操作區',buttons:[{
    text:'下載',
    click:data=>this.downLoad(data)
    
  }]},
] // 表格
  // 下载
  downLoad(data){
      const alink=document.createElement('a');
      alink.href=webApiUrls.baseDcc.downExcel+"?file_id="+data.fileOnlyCode+"&file_type=dcc";
      alink.click();
     // 附件下載
  }

自定义xlsx 文件

index.html

<script type="text/javascript" src="./assets/jquery/xlsx.full.min.js"></script>

ts

import { XlsxService } from '@delon/abc/xlsx';
 constructor(
    private http: _HttpClient,
    public msg: NzMessageService,
    private modalSrv: NzModalService,
    private cdr: ChangeDetectorRef,
    private xlsx: XlsxService,
  ) {}
columns: STColumn[] = [
  { title: '序号', index: 'num', fixed: 'left', width: 30 },
  { title: 'No.', index: 'no', fixed: 'left', width: 100 },
 ]
 download(): void {
    const data = [this.columns.map(i => i.title)];
    this.data.forEach(i => data.push(this.columns.map(c => i[c.index as string])));
    this.xlsx.export({
      filename: '指示書簽核明細.xlsx',
      sheets: [
        {
          data,
          name: 'sheet1',
        },
      ],
    });
  }