前端到后端生成excel表格并下载,语言Java，TypeScript，框架restful JavaSpring

一：前端显示一个按钮，触发下载任务

1. query.component.html

<div class="animated fadeIn">

  <div class="card">
    <div class="card-header">
      <div class="row col-lg-12 col-md-12 col-sm-12">
        <div class="col-lg-2 col-md-2 col-sm-1">
          <strong>
            xxxxxxx
          </strong>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-1">
          <div class="btn-group btn-group-pull-right">
            <button class="btn btn-block sgm-btn-subject btn-sm" type="button" (click)="exportloadExcpTran()">点击这个按钮触发下载任务
            </button>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
<app-new-dol-dialog #dolDialog></app-new-dol-dialog>

其他都不重要 就看那个button

2. trans-excp-process-query.component.ts
这个文件你可以理解为后端的controller

  exportloadExcpTran = () => {
   
    let transExcpExport = new TransExcpExportVo();
    this.transExcpProcessService.loanTransExcp(transExcpExport).subscribe(res => {
   
      console.log(res.status);
      if (res.status == 1) {
   

          this.fileService.asyncDownLoadFile(this.asyncResultUrl, this.transExcpExport);

      } else {
   
        this.dolDialog.show(res.errMsg, '提示', true);
      }
    });
  };

有这么个函数 叫做exportloadExcpTran 你自己起名字
然后里面涉及到的vo自己去定义 你表格里有什么列就设置什么vo

/** 查询条件：无参，只有默认页数 */

vo.ts文件
import {
   TableVo} from "../../../vendor/table/table.vo";

export class TransExcpExportVo extends TableVo {
   
  v: string; 
  brandName: String; /
  informTime:String;   //通知时间
 。。。。。。。。。。。。
}

现在我们要好好理解下这个函数
Observable类，从它的中文名:"可观察的"就能看出，Observable的作用是可以起到类似监听的作用。subscribe是Observable类下的一个函数。
这里来个传送门 感觉讲的不错 subscribe的几种作用
https://blog.csdn.net/weixin_39150852/article/details/102665986?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task
这里是：用于页面传参(订阅实时监视着数据的变化)
前面service里面的函数一旦返回res马上执行后面
console.log 以及后面的内容

3. trans-excp-process.service.js

@Injectable()
export class TransExcpProcessService {
   
    url: ResourceVO;
    transExcpQueryVo : TableVo;
    constructor(@Inject(RestService) private restService: RestServiceInterface,
        private alertService:AlertService) {
   
    }

  loanTransExcp(transExcpExportVo: TransExcpExportVo): Observable<any> {
   
    console.log("service test");
    this.url = AppUrls.ORDER_MANAGEMENT.ORDER_TRANS_EXCP;
    return this.restService.commonAjax(this.url,transExcpExportVo).map((res: any) => {
   
      return res;
    }).catch((error: any) => Observable.throw(error || 'Server Error'));
  };
}

Ts语言变量名在冒号前面
这里this.url很关键要写入后端的url地址
然后利用一个commonAjax函数来把后端打包好的表格地址获取下来。
我们再来看看这个commonAjax是什么东西。
在rest文件夹下 rest.service.interface.ts

import {
   RequestOptionsArgs} from "@angular/http";
import {
   Observable} from "rxjs/Observable";
import {
   ResourceVO} from "../../app.urls";

export interface RestServiceInterface {
   

  rest<T>