崩溃的 Stimulsoft 报告查看器答案

【问题标题】：Crashed Stimulsoft Report Viewer崩溃的 Stimulsoft 报告查看器
【发布时间】：2018-07-03 09:35:27
【问题描述】：

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

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

如果您发现我的帖子缺少信息，请通知我，我会立即对其进行编辑。

【问题讨论】：

标签： javascript angular report reporting stimulsoft

【解决方案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 
         }

现在它在页面和标签内工作正常

【讨论】：