如何将脚本的不同功能放在同一个html页面中？答案

【问题标题】：How can I put the differents functions of the script together in the same html page?如何将脚本的不同功能放在同一个html页面中？
【发布时间】：2016-04-28 08:32:34
【问题描述】：

我想使用 DIV 来显示我的报告，所以我看到了 icCube 文档 icCube Web Reporting : Displaying a Report 但是当我尝试应用它时，我很困惑如何将脚本的不同功能集中在一起html页面，功能如下：

第一部分

var ic3reporting = new ic3.Reporting({
    noticesLevel: ic3.NoticeLevel.ERROR,
    dsSettings: {
        userName: "demo",
        userPassword: "demo",
        url: "http://localhost:8282/icCube/gvi"
    }
});

ic3reporting.setupGVIConfiguration(function() {
    ic3reporting.setupApplication({
        mode: ic3.MainReportMode.REPORTING,
        menu: ic3.MainReportMenuMode.OFF,
        noticesLevel: ic3.NoticeLevel.ERROR,
        container: $("#report-container")
    });

});

第二部分

var options = {
    report: { name: 'My Report' },
    mode: ic3.MainReportMode.EDITING_REPORTING,
    menu: ic3.MainReportMenuMode.ON,
    noticesLevel: ic3.NoticeLevel.INFO
};

ic3reporting.openReport(options, function() {
    // your callback (I don't inderstand how can i putting this code)
});

我不明白我怎样才能把这些部分收集起来构建这个脚本对我来说非常重要，这使得报表的导出比以前更容易。

【问题讨论】：

标签： javascript html iccube

【解决方案1】：

你可以这样一起使用这些部分：

<!doctype html>
<head lang="en">
    <meta charset="utf-8">
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%
        }
    </style>
</head>
<body>
<!-- 1. Define container for the report somewhere in html page -->
<div id="report-container"></div>

<!-- 2. Include reporting application scripts -->
<script src="http://localhost:8282/icCube/doc/ic3-report/app/reporting/js/loader/ic3bootstrap.js"></script>

<!-- 3. Initialization sequence -->
<script type="text/javascript">
    var ic3root = "http://localhost:8282/icCube/doc/ic3-report/app/";
    var ic3rootLocal = "http://localhost:8282/icCube/doc/ic3-report/app-local/";
    // ic3reporting variable could be used globally, consider using array or different names here if
    // you are going to show multiple report applications at the same time
    var ic3reporting = null;

    var options = {
        root: ic3root,
        rootLocal: ic3rootLocal,

        // This function starts work just after initialization of reporting framework
        callback: function () {
            // 3.1 Create reporting instance with proper data source configuration
            ic3reporting = new ic3.Reporting({
                noticesLevel: ic3.NoticeLevel.ERROR,
                dsSettings: {
                    userName: "demo",
                    userPassword: "demo",
                    url: "http://localhost:8282/icCube/gvi"
                }
            });
            // 3.2 This function setups connection to the configured datasource and calls callback when connection is ready
            ic3reporting.setupGVIConfiguration(function () {
                // 3.3 Here we have ready connection, time to show empty reporting application
                var initialApplicationOptions = {
                    mode: ic3.MainReportMode.REPORTING,
                    menu: ic3.MainReportMenuMode.OFF,

                    noticesLevel: ic3.NoticeLevel.ERROR,

                    container: $("#report-container")
                };
                ic3reporting.setupApplication(initialApplicationOptions);

                // 3.4 just after setupApplication we have ready to work reporting environment, we can open reports, switch modes, etc
                // here we have open report sequence
                var options = {report: {name: 'My Report'}};
                ic3reporting.openReport(options, function () {
                    alert("Report opened successfully")
                });
            });
        }
    };
    ic3ready(options);
</script>
</body>
</html>

【讨论】：

【解决方案2】：

这是正确的代码

<html>
<head lang="en">
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>

</head>
<body>

<!-- ic3 bootstrap javascript -->
<script src="http://localhost:8282/icCube/doc/ic3-report/app/reporting /js/loader/ic3bootstrap.js"></script>

<script type="text/javascript">

    /**
     * Location of the icCube reporting files; not necessarily co-located
     * with this HTML page. For example, assuming this file is located within
     * the "Docs" repository of a local icCube install, this path would be :
     *
     *            /icCube/doc/ic3-report/app/reporting/
     */



    var ic3root = "http://localhost:8282/icCube/doc/ic3-report/app/";
    var ic3rootLocal = "http://localhost:8282/icCube/doc/ic3-report/app-local/";

    var options = {

        root: ic3root,
        rootLocal: ic3rootLocal,

        callback: function () {
           var ic3reporting = new ic3.Reporting(
           {
              noticesLevel:ic3.NoticeLevel.ERROR,

             dsSettings:{
             userName:"demo",
             userPassword:"demo",
             url: "http://localhost:8282/icCube/gvi"
            }
           });

            ic3reporting.setupGVIConfiguration(function () {

          ic3reporting.setupApplication(
          {

           mode:ic3.MainReportMode.REPORTING,
           menu:ic3.MainReportMenuMode.OFF,

           noticesLevel:ic3.NoticeLevel.ERROR,

           container:$(".ic3-report-content-container")
           });

           var options = {

             report:{
                name:'rapportest'
              },

               mode:ic3.MainReportMode.EDITING_REPORTING,
               menu:ic3.MainReportMenuMode.OFF,

               noticesLevel:ic3.NoticeLevel.INFO

              };

              ic3reporting.openReport(options, function () {
                alert("Report opened successfully")
                });
          });        
        }
    };
    ic3ready(options);


</script>
<div class="ic3-report-content-container" style="border:solid 1px red;"></div>

【讨论】：

您是否设置了正确的报告名称而不是“我的报告”=> var options = {report: {name: 'My Report'}};？还将alert("Report opened successfully") 行与所需的回调交换。
我还有其他需要，我想将这个图表导出到 excel 使用我已经使用过的这个 div，你能帮忙吗，因为这是我的最终目标是将它导出到 excel 或图像，但我没有找到任何解决方案
如果您正在谈论报告，您可以将其导出为 pdf，然后将其包含在您的 excel 文件中。另一方面，如果您指的是一些图表小部件，请使用它自己的导出到图像功能。请说明您的问题。