Question

我正在Angular 5项目中使用Stimulsoft，首先，我创建了一个按钮（在bootstrap标签内），然后单击它会触发一个函数来生成报告

和按钮html代码：

 <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>

以及通过单击（生成报告）要触发的功能：

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代码中的位置一样。

如果您看到我的帖子缺少信息，请一直到我这里，我会立即对其进行编辑。

Answer 1

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

仅通过将报告和查看器的实例创建为类中的属性来解决

  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 
         }

现在它在页面和标签内正常运行

Stimulsoft报表查看器崩溃

1 个答案: