我在Angular 5 Project中使用Stimulsoft,首先我创建了一个按钮(在bootstrap选项卡中),然后单击它会触发一个函数来生成报告
and the button html code:
<ngb-tab>
<ng-template ngbTabTitle ><b>Report</b></ng-template>
<ng-template ngbTabContent>
<button (click)="generateReport()" class="btn m-btn btn-danger"
id="generateReport">
<span>
<i class="la la-eye"></i>
<span> Generate Report</span>
</span>
</button>
<div id="Report"></div>
</ng-template>
</ngb-tab>
and the function to be triggered by clicking (Generate Report):
generateReport() {
this.ExportImageForReport();
let sol = this.solution;
setTimeout(() => {
let HS = this.body.hotStreams.map(a => { let obj = { Name: a.name,
Supply: a.Supply, Target: a.Target, Duty: Math.round((a.Duty
/ 1000000) * 10) / 10 }; return obj });
let CS = this.body.coldStreams.map(a => { let obj = { Name: a.name,
Supply: a.Supply, Target: a.Target, Duty: Math.round((a.Duty
/ 1000000) * 10) / 10 }; return obj });
let Solution = {
Results: {
IntervalTemp: sol.IntervalTemp,
HotInterval: sol.HotIntervalTemp,
ColdInterval: sol.ColdIntervalTemp,
HotDuty: Math.round((sol.Qhot / 1000000) * 10) / 10,
ColdDuty: Math.round((sol.Qcold / 1000000) * 10) / 10,
},
Units: {
temperature: this.Units.temperature,
duty: this.Units.duty
},
HotStreams: HS,
ColdStreams: CS,
Diagrams: {
HT_Diagram: this.HT_img,
GCC_Diagram: this.GCC_img,
Grid_Diagram: this.Grid_img,
},
UserData: {
username:this.username,
email:this.email
}
}
fileName = "ByStreamReport"
let report = new Stimulsoft.Report.StiReport();
report.loadFile("./assets/stimulsoft/name.mrt");
let dataSet = new Stimulsoft.System.Data.DataSet("Solution");
dataSet.readJson(Solution);
report.regData("Solution", "Solution", dataSet);
let options = new Stimulsoft.Viewer.StiViewerOptions;
let viewer = new Stimulsoft.Viewer.StiViewer(options);
viewer.report = report;
viewer.renderHtml("Report");
},6000)
}
之后,报表查看器将在新的浏览器选项卡中打开,而不是像应该的那样位于引导选项卡内部,并且浏览器会像下面的照片中显示的那样崩溃,顶部和按钮上出现两个菜单,我将报告导出为pdf,一切都很好,所有数据都在其位置,
我想要的是将报告查看器加载到(生成报告)下面,就像它在html代码中的位置一样 .
如果你看到我的帖子遗漏了一个信息,我会立即编辑它 .
1 回答
我在按钮点击后创建报表和选项实例的唯一问题是导致查看器崩溃,
它只需将report和viewer的实例创建为类中的属性即可解决
现在它在页面和选项卡中工作正常