jquery.fileDownload.js

1，简短说明

使用 jquery.fileDownload.js 增加前后端交互友好性

2，实例

filedownload组件HTML部分：

<div class="download-container">
    <!--初始化时显示-->
    <nz-dropdown *ngIf="!creatFileIng">
        <button nz-button nzType="primary" nz-dropdown><span>导出</span> <i nz-icon type="down"></i></button> 
        <!-- 内置导出格式 -->
        <ul nz-menu *ngIf="!exportOption['dropdown']">
            <li nz-menu-item>
                <a (click)="exportData('excel')">导出为EXCEL</a>
            </li>
            <li nz-menu-item>
                <a (click)="exportData('html')">导出为HTML</a>
            </li>
        </ul>
        <!-- 自定义导出格式 -->
        <ul nz-menu *ngIf="exportOption['dropdown']">
            <li nz-menu-item *ngFor="let down of exportOption['dropdown']">
                <a (click)="exportData(down.value)">{{down.label}}</a>
            </li>
        </ul>
    </nz-dropdown>
    <!--生成文件过程中显示-->
    <button *ngIf="creatFileIng" nz-button nzType="primary" [nzLoading]="true">正在获取导出地址...</button>
    <!--文件生成请求成功后显示-->
    <a *ngIf="resFileName" href="javascript:;" class="download-a" (click)="download()">点击下载</a>
    <!--错误提示信息-->
    <!-- <span class="download-a error-bg-color" *ngIf="errorMsg.length">{{errorMsg}}</span> -->
</div>
<!--悬浮层-->
<div class="loading-layer">
    <i nz-icon type="loading" class="loading-icon"></i>
    <div class="loading-des">下载中...</div>
</div>

 filedownload组件Typescript代码：

export(e) {
        this.creatFileIng = true;
        this.resFileName = false;
        this.fileNameError = false;
        this.errorMsg = '';
        const url = this.exportOption.fileNameUrl;
        const params = this.exportOption.params;
        console.log("params",params);
        params['export_type'] = e;
        this.httpService.post(url, {}, params).subscribe(
            (res) => {
                console.log("zipname:",res);
                this.creatFileIng = false;
                if (res.data !== undefined) {
                    if (res.data) {
                        this.resFileName = true;
                        this.fileName = res.data;
                    } else {
                        this.resFileName = false;
                        this.errorMsg = '当前导出数据为空！';
                        this.msgService.info(this.errorMsg);
                    }
                } else {
                    this.resFileName = true;
                    this.fileName = res;
                }
            },
            (error) => {
                this.creatFileIng = false;
                this.fileNameError = true;
                if (error && error.error && error.error.errMsg) {
                    this.errorMsg = error.error.errMsg;
                } else {
                    this.errorMsg = '获取文件名失败';
                }
                this.msgService.error(this.errorMsg);
            }
        );
    }

    download() {
        this.$loadinLayer.style.visibility = 'visible';
        this.errorMsg = '';
        const url = this.exportOption.downloadUrl;
        const params = {zip_name: this.fileName};
        $.fileDownload(url, {
            httpMethod: 'GET',
            data: params,
            successCallback: (url) => {
                this.$loadinLayer.style.visibility = 'hidden';
            },
            failCallback: (responseHtml, url) => {
                this.$loadinLayer.style.visibility = 'hidden';
                this.errorMsg = '下载文件失败';
                this.msgService.error(this.errorMsg);
            }
        });


    }

 文件执行下载代码：

async downloadLogList(map:object){
    const logList = [];
    for(var i = 0;i<10;i++){
      if(map[i.toString()] ===true){
         logList.push(i);
      }
    }
    console.log("loglist:",logList);
    const logNameList = [];
    for(var i = 0;i<logList.length;i++){
      var logname = this.listOfData[logList[i]].name;
      logNameList.push(logname);
    }
    console.log("lognamelist:",logNameList);
    const param = {
      num:logNameList.length.toString(),
      log_name_list:logNameList
    };
    if(param.num==="0"){
      alert("请先选择需要导出的文件，在进行此操作！");
      console.log("请先选择需要导出的文件，在进行此操作！")
      return;
    }
    console.log("params:",param);
    this.exportOption = {
      fileNameUrl: `/isopUtil/api/v1/check_log/get_zip_name`,//生成压缩包名称，如20210124-00000000.zip
      downloadUrl: `/isopUtil/api/v1/check_log/download_zip`,//生成压缩包下载url
      httpMethod: 'POST',
      dropdown: [{label: '导出为ZIP', value: 'zip'}],
      params: param
    }
    const res = await 
    this.logprintService.downloadLoglist(param).subscribe(
      (res)=>{
        this.ziplist= res.data;
        console.log("压缩包生产成功",this.ziplist);
      },
      (err)=>{
        console.log("请求失败");
      }
      
    );
    
  }

3，实操