zqhuang 发表于 2020-7-7 09:40:27

A14 自定义工具栏按钮问题

本帖最后由 zqhuang 于 2020-7-22 10:20 编辑


A14 根据api文档加入自定义工具栏按钮报错是什么原因？


      

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Reports Designer</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- No Virtual Directory -->
    <base href="/">

    <!-- For Virtual Directory -->
    <!--<base href="/VirtualDirectoryName/">-->

    <link rel="stylesheet" href="/vendor/css/materialdesignicons.min.css" media="all" type="text/css" />
    <link rel="stylesheet" href="/vendor/css/fonts-googleapis.css" type="text/css" />
    <link rel="stylesheet" href="/jsViewer.min.css" />

    <style type="text/css">
      .gcv-pageview {
            overflow: auto;
            width: 100%;
            height: 100%;
            padding-top: 0px;
      }

      .gcv-page {
            position: relative;
            overflow: hidden;
            margin: 0 auto 0px auto;
            background-color: white;
            box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.05);
      }
    </style>
    <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png" />
    <link rel="shortcut icon" href="/icons/favicon.ico" />

</head>
<body class="theme-blue">
    <div id="viewer-id" style="width: 100%; height: 100%;">
      <style type="text/css">
            * {
                box-sizing: border-box;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box
            }

            .reportPage {
                background-color: #fff;
                overflow: hidden
            }

            .canvasItem {
                line-height: normal
            }

            .canvasItem, .itemContent {
                position: absolute
            }

            .listItem, .section {
                position: relative
            }

            .placeItem {
                position: absolute;
                z-index: inherit
            }

            .tableItem {
                border-collapse: collapse;
                table-layout: fixed
            }

            .tableCell {
                padding: 0;
                vertical-align: top;
            }

            @-moz-document url-prefix() {
                .tableCell {
                  height: 100%
                }
            }

            .cellContent {
                position: relative;
                height: 100%;
                overflow: hidden
            }

            .cbChecked, .cbUnchecked {
                width: 12px;
                height: 12px;
                flex-basis: 12px;
                font-size: 10px;
                border-width: 1px;
                border-style: solid;
                text-align: center;
                flex-grow: 0;
                flex-shrink: 0
            }

                .cbChecked:after {
                  content: "\2714";
                  vertical-align: top
                }

            .cbCommon {
                width: 100%;
                height: 100%;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                text-align: center
            }

            .cbTopLeft {
                align-items: flex-start;
                text-align: left
            }

            .cbTopRight {
                align-items: flex-end;
                text-align: right
            }

            .cbMiddleLeft {
                flex-direction: row;
                text-align: left
            }

            .cbMiddleCenter {
                flex-direction: row;
                justify-content: center
            }

            .cbMiddleRight {
                flex-direction: row-reverse;
                text-align: right
            }

            .cbBottomLeft {
                align-items: flex-start;
                text-align: left
            }

            .cbBottomCenter, .cbBottomLeft, .cbBottomRight {
                flex-direction: column-reverse
            }

            .cbBottomRight {
                align-items: flex-end;
                text-align: right
            }

            .cbTextCommon {
                width: 100%
            }

            .cbTextBottomLeft, .cbTextTopLeft {
                padding-left: 14px
            }

            .cbTextBottomRight, .cbTextTopRight {
                padding-right: 14px
            }

            .cbTextMiddleLeft {
                padding-left: 2px;
                width: calc(100% - 2px)
            }

            .cbTextMiddleCenter {
                position: absolute
            }

            .cbTextMiddleRight {
                padding-right: 2px;
                width: calc(100% - 2px)
            }

            .textBoxItem {
                display: flex;
                position: absolute
            }

            .textBoxContent {
                width: 100%;
                max-height: 100%;
                overflow: hidden;
                text-decoration: inherit
            }

            .hideOverflow {
                overflow: hidden
            }

            .action {
                cursor: pointer;
                text-decoration: inherit
            }

                .action.toggle {
                  font-size: 75%
                }

                  .action.toggle.expanded:after {
                        content: "\2795"
                  }

                  .action.toggle.collapsed:after {
                        content: "\2796"
                  }

            .tocLevelLabel, .tocLevelNumber {
                float: left;
                text-decoration: inherit
            }

            .tocLevelNumber {
                text-align: left
            }

            .tocPageNumber {
                float: right;
                text-decoration: inherit
            }

            .tocPageNumberNoFill {
                float: left;
                padding-left: 2pt;
                text-decoration: inherit
            }

            .bordersItem {
                pointer-events: none
            }

            .errorMessage {
                font-size: 10pt;
                color: #000;
                padding: 2pt
            }

            .gcdv-tooltip {
                position: absolute;
                z-index: 1000;
                top: 0;
                left: 0;
                pointer-events: none;
                max-width: 400px;
                padding: 6px;
                background-color: #ffffe5;
                border: 1px solid rgba(0,0,0,.1);
                border-radius: 6px;
                box-shadow: 0 6px 12px rgba(0,0,0,.175);
                box-sizing: border-box
            }

            .spinner {
                position: fixed;
                top: calc(50% - 9px);
                left: calc(50% - 35px);
                width: 70px;
                text-align: center;
            }

            #root {
                background-color: #e5e5e5;
            }

            .spinner > div {
                width: 18px;
                height: 18px;
                background-color: #333;
                border-radius: 100%;
                display: inline-block;
                -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
                animation: sk-bouncedelay 1.4s infinite ease-in-out both;
            }

            .spinner .bounce1 {
                -webkit-animation-delay: -0.32s;
                animation-delay: -0.32s;
            }

            .spinner .bounce2 {
                -webkit-animation-delay: -0.16s;
                animation-delay: -0.16s;
            }

            @-webkit-keyframes sk-bouncedelay {
                0%, 80%, 100% {
                  -webkit-transform: scale(0)
                }

                40% {
                  -webkit-transform: scale(1.0)
                }
            }

            @keyframes sk-bouncedelay {
                0%, 80%, 100% {
                  -webkit-transform: scale(0);
                  transform: scale(0);
                }

                40% {
                  -webkit-transform: scale(1.0);
                  transform: scale(1.0);
                }
            }
      </style>

      <div class="spinner">
            <div class="bounce1"></div>
            <div class="bounce2"></div>
            <div class="bounce3"></div>
      </div>
    </div>

    <script src="/vendor/js/jquery.min.js"></script>
    <script src="/vendor/js/bootstrap.min.js"></script>
    <script src="/baseServerApi.js"></script>
    <script src="/file-dialog.js"></script>
    <script src="/data-set-picker.js"></script>
    <script src="/file-view.js"></script>
    <script src="/viewer-container.js"></script>
    <script src="/ar-datasource-editor.js"></script>
    <script src="/web-designer.js"></script>

    <script src="/jsViewer.min.js"></script>
   
    <script type="text/javascript">
      var viewer = GrapeCity.ActiveReports.JSViewer.create({
            element: '#viewer-id',
            reportService: {
                url: '/api/reporting',
            },
            //reportID: 'test.rdlx;test;{"PrintMan":"PrintMan","Id":2}',
            settings: {
                zoomType: 'FitPage'
            }
            ,
            documentLoaded: function () {
                //viewer.print();
                $("#main_toolbar_Item_7").hide();
                $("#main_toolbar_Item_8").hide();
                $("#main_toolbar_Item_9").hide();
                $("#main_toolbar_Item_10").hide();
                $("#main_toolbar_Item_11").hide();
                $("#main_toolbar_Item_12").hide();
                $("#main_toolbar_Item_13").hide();
                $("#main_toolbar_Item_14").hide();
                $("#main_toolbar_Item_17").hide();
                $("#main_toolbar_Item_18").hide();
                $("#main_toolbar_Item_19").hide();
            }
      });
      viewer.openReport('test.rdlx;test;{"PrintMan":"PrintMan","Id":2}', [{ name: 'BelongId', values: }])

      if ('0' == '0') {
            $(".gcv-menu").hide();
      }

      if ('1' == '0') {
            $(".gcv-header-container").hide();
      };
      var icon = `
   
`;
      var svgPdfExportButton = {
            key: '$pdfExportButtonKey',
            icon: { type: 'svg', content: icon },
            enabled: true,
            action: function (item) {
                alert("OK")
            },
            onUpdate: function (arg, item) {
            }
      }

      viewer.toolbar.addItem(svgPdfExportButton);

    </script>
</body>
</html>

      

KearneyKang 发表于 2020-7-7 09:40:28

本帖最后由 KearneyKang 于 2020-7-9 16:11 编辑

您好，这个我已经试过，好像也有同样的问题，正在跟研发积极沟通中
参考写法：
这样写：
viewer.toolbar.desktop.addItem(pdfExportButton);
//or
viewer.toolbar.desktop.addItem(svgPdfExportButton);<script type="text/javascript">
    var viewer = GrapeCity.ActiveReports.JSViewer.create({
      element: '#viewerContainer',
      reportID: 'RDL报表.rdlx;123;456', //报表名称和参数的传递
      //availableExports: ['Xml', 'Pdf'],

      reportService: {},
      renderMode: 'Galley',
      // other properties
      documentLoaded: () => {      
            //   //viewer.print();
            //   //$("#main_toolbar_Item_17").hide();
            //   //$("#main_toolbar_Item_18").hide();
            //   //$("#main_toolbar_Item_19").hide();
            //viewer.export('XLSX', null, true, { FileName: '1997 Annual Report1', Multisheet: false,LayoutMode:"Galley" })
            //viewer.toolbar.toggle(false)
      }
    });



var pdfExportButton = {
    key: '$pdfExportButtonKey',
    iconCssClass: 'mdi mdi-file-pdf',
    enabled: true,
    action: function(item) {
      console.log('Export to PDF function works here');
    },
    onUpdate: function(arg, item) {
      console.log('Something in viewer was updated, check/update button state here');
    }
};


//OR button with svg as icon
var icon = `
`;
var svgPdfExportButton = {
    key: '$pdfExportButtonKey',
    icon: {type: 'svg', content: icon},
    enabled: true,
    action: function(item) {
      console.log('Export to PDF function works here');
    },
    onUpdate: function(arg, item) {
      console.log('Something in viewer was updated, check/update button state here');
    }
}


viewer.toolbar.desktop.addItem(pdfExportButton);
//or
viewer.toolbar.desktop.addItem(svgPdfExportButton);
viewer.toolbar.desktop.removeItem('$zoom');
viewer.toolbar.desktop.removeItem('$print');
viewer.toolbar.desktop.removeItem('$pdfExportButtonKey');
</script>

KearneyKang 发表于 2020-7-7 14:21:35

您好，你现在遇到的问题是给报表工具栏添加自定义的按钮报错是吧，问题已经收到，我这边需要去测试验证下。这个可能需要一点时间

zqhuang 发表于 2020-7-9 09:03:15

KearneyKang 发表于 2020-7-7 14:21
您好，你现在遇到的问题是给报表工具栏添加自定义的按钮报错是吧，问题已经收到，我这边需要去测试验证下。 ...

这个问题现在能怎么解决？

zqhuang 发表于 2020-7-10 08:51:24

KearneyKang 发表于 2020-7-9 09:11
您好，这个我已经试过，好像也有同样的问题，正在跟研发积极沟通中
参考写法：
这样写：


可以了，还想问下就是下面这个属性，可以赋值的值有哪些？
iconCssClass: 'mdi mdi-file-pdf',

KearneyKang 发表于 2020-7-10 09:14:52

这个我这边暂时也不是很清楚，昨天也是刚刚知道原来的写法不行，要使用这种新的方法来添加按钮
页: [1]
查看完整版本: A14 自定义工具栏按钮问题