首页 文章

崩溃的Stimulsoft报告查看器

提问于
浏览
0

我在Angular 5 Project中使用Stimulsoft,首先我创建了一个按钮(在bootstrap选项卡中),然后单击它会触发一个函数来生成报告
enter image description here

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,一切都很好,所有数据都在其位置,

enter image description here
我想要的是将报告查看器加载到(生成报告)下面,就像它在html代码中的位置一样 .

如果你看到我的帖子遗漏了一个信息,我会立即编辑它 .

1 回答

  • 0

    我在按钮点击后创建报表和选项实例的唯一问题是导致查看器崩溃,

    它只需将report和viewer的实例创建为类中的属性即可解决

    export class SolutionComponent implements OnInit {
    
             viewer: any = new Stimulsoft.Viewer.StiViewer(null, 'StiViewer', false);
             report: any = new Stimulsoft.Report.StiReport();
    
             generateReport() { 
               // the rest of the code 
             }
    

    现在它在页面和选项卡中工作正常

    enter image description here

相关问题