一:前端显示一个按钮,触发下载任务
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>