找回密码
 立即注册

QQ登录

只需一步，快速开始

首页 › ActiveReports专区 › 求助中心 › 查看内容
发新帖

zqhuang

注册会员

4

主题

28

帖子

102

积分

注册会员

积分
102
QQ
最新发帖

[已处理] A14 自定义工具栏按钮问题

zqhuang
注册会员   /  发表于：2020-7-7 09:40  /   查看：3920  /  回复：5
1金币
本帖最后由 zqhuang 于 2020-7-22 10:20 编辑


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


  3.         

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

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

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

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

  23.     <style type="text/css">
  24.         .gcv-pageview {
  25.             overflow: auto;
  26.             width: 100%;
  27.             height: 100%;
  28.             padding-top: 0px;
  29.         }

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

  43. </head>
  44. <body class="theme-blue">
  45.     <div id="viewer-id" style="width: 100%; height: 100%;">
  46.         <style type="text/css">
  47.             * {
  48.                 box-sizing: border-box;
  49.                 -moz-box-sizing: border-box;
  50.                 -webkit-box-sizing: border-box
  51.             }

  53.             .reportPage {
  54.                 background-color: #fff;
  55.                 overflow: hidden
  56.             }

  58.             .canvasItem {
  59.                 line-height: normal
  60.             }

  62.             .canvasItem, .itemContent {
  63.                 position: absolute
  64.             }

  66.             .listItem, .section {
  67.                 position: relative
  68.             }

  70.             .placeItem {
  71.                 position: absolute;
  72.                 z-index: inherit
  73.             }

  75.             .tableItem {
  76.                 border-collapse: collapse;
  77.                 table-layout: fixed
  78.             }

  80.             .tableCell {
  81.                 padding: 0;
  82.                 vertical-align: top;
  83.             }

  85.             @-moz-document url-prefix() {
  86.                 .tableCell {
  87.                     height: 100%
  88.                 }
  89.             }

  91.             .cellContent {
  92.                 position: relative;
  93.                 height: 100%;
  94.                 overflow: hidden
  95.             }

  97.             .cbChecked, .cbUnchecked {
  98.                 width: 12px;
  99.                 height: 12px;
  100.                 flex-basis: 12px;
  101.                 font-size: 10px;
  102.                 border-width: 1px;
  103.                 border-style: solid;
  104.                 text-align: center;
  105.                 flex-grow: 0;
  106.                 flex-shrink: 0
  107.             }

  109.                 .cbChecked:after {
  110.                     content: "\2714";
  111.                     vertical-align: top
  112.                 }

  114.             .cbCommon {
  115.                 width: 100%;
  116.                 height: 100%;
  117.                 overflow: hidden;
  118.                 display: flex;
  119.                 flex-direction: column;
  120.                 justify-content: flex-start;
  121.                 align-items: center;
  122.                 text-align: center
  123.             }

  125.             .cbTopLeft {
  126.                 align-items: flex-start;
  127.                 text-align: left
  128.             }

  130.             .cbTopRight {
  131.                 align-items: flex-end;
  132.                 text-align: right
  133.             }

  135.             .cbMiddleLeft {
  136.                 flex-direction: row;
  137.                 text-align: left
  138.             }

  140.             .cbMiddleCenter {
  141.                 flex-direction: row;
  142.                 justify-content: center
  143.             }

  145.             .cbMiddleRight {
  146.                 flex-direction: row-reverse;
  147.                 text-align: right
  148.             }

  150.             .cbBottomLeft {
  151.                 align-items: flex-start;
  152.                 text-align: left
  153.             }

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

  159.             .cbBottomRight {
  160.                 align-items: flex-end;
  161.                 text-align: right
  162.             }

  164.             .cbTextCommon {
  165.                 width: 100%
  166.             }

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

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

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

  181.             .cbTextMiddleCenter {
  182.                 position: absolute
  183.             }

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

  190.             .textBoxItem {
  191.                 display: flex;
  192.                 position: absolute
  193.             }

  195.             .textBoxContent {
  196.                 width: 100%;
  197.                 max-height: 100%;
  198.                 overflow: hidden;
  199.                 text-decoration: inherit
  200.             }

  202.             .hideOverflow {
  203.                 overflow: hidden
  204.             }

  206.             .action {
  207.                 cursor: pointer;
  208.                 text-decoration: inherit
  209.             }

  211.                 .action.toggle {
  212.                     font-size: 75%
  213.                 }

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

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

  223.             .tocLevelLabel, .tocLevelNumber {
  224.                 float: left;
  225.                 text-decoration: inherit
  226.             }

  228.             .tocLevelNumber {
  229.                 text-align: left
  230.             }

  232.             .tocPageNumber {
  233.                 float: right;
  234.                 text-decoration: inherit
  235.             }

  237.             .tocPageNumberNoFill {
  238.                 float: left;
  239.                 padding-left: 2pt;
  240.                 text-decoration: inherit
  241.             }

  243.             .bordersItem {
  244.                 pointer-events: none
  245.             }

  247.             .errorMessage {
  248.                 font-size: 10pt;
  249.                 color: #000;
  250.                 padding: 2pt
  251.             }

  253.             .gcdv-tooltip {
  254.                 position: absolute;
  255.                 z-index: 1000;
  256.                 top: 0;
  257.                 left: 0;
  258.                 pointer-events: none;
  259.                 max-width: 400px;
  260.                 padding: 6px;
  261.                 background-color: #ffffe5;
  262.                 border: 1px solid rgba(0,0,0,.1);
  263.                 border-radius: 6px;
  264.                 box-shadow: 0 6px 12px rgba(0,0,0,.175);
  265.                 box-sizing: border-box
  266.             }

  268.             .spinner {
  269.                 position: fixed;
  270.                 top: calc(50% - 9px);
  271.                 left: calc(50% - 35px);
  272.                 width: 70px;
  273.                 text-align: center;
  274.             }

  276.             #root {
  277.                 background-color: #e5e5e5;
  278.             }

  280.             .spinner > div {
  281.                 width: 18px;
  282.                 height: 18px;
  283.                 background-color: #333;
  284.                 border-radius: 100%;
  285.                 display: inline-block;
  286.                 -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  287.                 animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  288.             }

  290.             .spinner .bounce1 {
  291.                 -webkit-animation-delay: -0.32s;
  292.                 animation-delay: -0.32s;
  293.             }

  295.             .spinner .bounce2 {
  296.                 -webkit-animation-delay: -0.16s;
  297.                 animation-delay: -0.16s;
  298.             }

  300.             @-webkit-keyframes sk-bouncedelay {
  301.                 0%, 80%, 100% {
  302.                     -webkit-transform: scale(0)
  303.                 }

  305.                 40% {
  306.                     -webkit-transform: scale(1.0)
  307.                 }
  308.             }

  310.             @keyframes sk-bouncedelay {
  311.                 0%, 80%, 100% {
  312.                     -webkit-transform: scale(0);
  313.                     transform: scale(0);
  314.                 }

  316.                 40% {
  317.                     -webkit-transform: scale(1.0);
  318.                     transform: scale(1.0);
  319.                 }
  320.             }
  321.         </style>

  323.         <div class="spinner">
  324.             <div class="bounce1"></div>
  325.             <div class="bounce2"></div>
  326.             <div class="bounce3"></div>
  327.         </div>
  328.     </div>

  330.     <script src="/vendor/js/jquery.min.js"></script>
  331.     <script src="/vendor/js/bootstrap.min.js"></script>
  332.     <script src="/baseServerApi.js"></script>
  333.     <script src="/file-dialog.js"></script>
  334.     <script src="/data-set-picker.js"></script>
  335.     <script src="/file-view.js"></script>
  336.     <script src="/viewer-container.js"></script>
  337.     <script src="/ar-datasource-editor.js"></script>
  338.     <script src="/web-designer.js"></script>

  340.     <script src="/jsViewer.min.js"></script>
  341.    
  342.     <script type="text/javascript">
  343.         var viewer = GrapeCity.ActiveReports.JSViewer.create({
  344.             element: '#viewer-id',
  345.             reportService: {
  346.                 url: '/api/reporting',
  347.             },
  348.             //reportID: 'test.rdlx;test;{"PrintMan":"PrintMan","Id":2}',
  349.             settings: {
  350.                 zoomType: 'FitPage'
  351.             }
  352.             ,
  353.             documentLoaded: function () {
  354.                 //viewer.print();
  355.                 $("#main_toolbar_Item_7").hide();
  356.                 $("#main_toolbar_Item_8").hide();
  357.                 $("#main_toolbar_Item_9").hide();
  358.                 $("#main_toolbar_Item_10").hide();
  359.                 $("#main_toolbar_Item_11").hide();
  360.                 $("#main_toolbar_Item_12").hide();
  361.                 $("#main_toolbar_Item_13").hide();
  362.                 $("#main_toolbar_Item_14").hide();
  363.                 $("#main_toolbar_Item_17").hide();
  364.                 $("#main_toolbar_Item_18").hide();
  365.                 $("#main_toolbar_Item_19").hide();
  366.             }
  367.         });
  368.         viewer.openReport('test.rdlx;test;{"PrintMan":"PrintMan","Id":2}', [{ name: 'BelongId', values: [0] }])

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

  374.         if ('1' == '0') {
  375.             $(".gcv-header-container").hide();
  376.         };
  377.         var icon = `
  378.    
  379. `;
  380.         var svgPdfExportButton = {
  381.             key: '$pdfExportButtonKey',
  382.             icon: { type: 'svg', content: icon },
  383.             enabled: true,
  384.             action: function (item) {
  385.                 alert("OK")
  386.             },
  387.             onUpdate: function (arg, item) {
  388.             }
  389.         }

  391.         viewer.toolbar.addItem(svgPdfExportButton);

  393.     </script>
  394. </body>
  395. </html>

  397.         
复制代码


附件: 您需要 登录 才可以下载或查看，没有帐号？立即注册

最佳答案

KearneyKang

查看完整内容

您好，这个我已经试过，好像也有同样的问题，正在跟研发积极沟通中 参考写法： 这样写： viewer.toolbar.desktop.addItem(pdfExportButton);[/backcolor] //or[/backcolor] viewer.toolbar.desktop.addItem(svgPdfExportButton);[/backcolor]

5 个回复

倒序浏览
最佳答案
最佳答案
KearneyKang讲师达人认证 悬赏达人认证
超级版主   /  发表于：2020-7-7 09:40:28
来自 4#
本帖最后由 KearneyKang 于 2020-7-9 16:11 编辑

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

  7.         reportService: {},
  8.         renderMode: 'Galley',
  9.         // other properties
  10.         documentLoaded: () => {        
  11.             //   //viewer.print();
  12.             //   //$("#main_toolbar_Item_17").hide();
  13.             //   //$("#main_toolbar_Item_18").hide();
  14.             //   //$("#main_toolbar_Item_19").hide();
  15.             //viewer.export('XLSX', null, true, { FileName: '1997 Annual Report1', Multisheet: false,LayoutMode:"Galley" })
  16.             //viewer.toolbar.toggle(false)
  17.         }
  18.     });



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


  35. //OR button with svg as icon
  36. var icon = `
  37. `;
  38. var svgPdfExportButton = {
  39.     key: '$pdfExportButtonKey',
  40.     icon: {type: 'svg', content: icon},
  41.     enabled: true,
  42.     action: function(item) {
  43.         console.log('Export to PDF function works here');
  44.     },
  45.     onUpdate: function(arg, item) {
  46.         console.log('Something in viewer was updated, check/update button state here');
  47.     }
  48. }


  51. viewer.toolbar.desktop.addItem(pdfExportButton);
  52. //or
  53. viewer.toolbar.desktop.addItem(svgPdfExportButton);
  54. viewer.toolbar.desktop.removeItem('$zoom');
  55. viewer.toolbar.desktop.removeItem('$print');
  56. viewer.toolbar.desktop.removeItem('$pdfExportButtonKey');
  57. </script>
复制代码
回复 使用道具 举报
KearneyKang讲师达人认证 悬赏达人认证
超级版主   /  发表于：2020-7-7 14:21:35
2#
您好，你现在遇到的问题是给报表工具栏添加自定义的按钮报错是吧，问题已经收到，我这边需要去测试验证下。这个可能需要一点时间
回复 使用道具 举报
zqhuang
注册会员   /  发表于：2020-7-9 09:03:15
3#
KearneyKang 发表于 2020-7-7 14:21
您好，你现在遇到的问题是给报表工具栏添加自定义的按钮报错是吧，问题已经收到，我这边需要去测试验证下。 ...

这个问题现在能怎么解决？
回复 使用道具 举报
zqhuang
注册会员   /  发表于：2020-7-10 08:51:24
5#
KearneyKang 发表于 2020-7-9 09:11
您好，这个我已经试过，好像也有同样的问题，正在跟研发积极沟通中
参考写法：
这样写：

可以了，还想问下就是下面这个属性，可以赋值的值有哪些？
  iconCssClass: 'mdi mdi-file-pdf',
回复 使用道具 举报
KearneyKang讲师达人认证 悬赏达人认证
超级版主   /  发表于：2020-7-10 09:14:52
6#
这个我这边暂时也不是很清楚，昨天也是刚刚知道原来的写法不行，要使用这种新的方法来添加按钮
回复 使用道具 举报
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
产品与服务
活字格低代码平台
Wyn 商业智能软件
SpreadJS纯前端表格控件
技术服务体系
技术博客
低代码技术
客户与案例
典型客户
成功案例
用户访谈
合作与生态
合作伙伴网络
葡萄城市场
葡萄城与国产化
活字格用友客开工具
品牌活动
葡萄城公开课
品牌战略发布会
赋能开发者高峰论坛
企业级低代码发展研讨会
企业级低代码应用大赛
表格技术研讨会
了解葡萄城
葡萄城简介
愿景使命
研发与创新
荣誉奖项
加入我们
联系方式
联系我们
400-657-6008

葡萄城社区二维码

关注“葡萄城社区”

赋能开发者

西安葡萄城软件有限公司
专业的软件开发技术和低代码平台提供商

陕ICP备2020018819号  |   陕公网安备：61019002000258  |   隐私政策  |   网站地图  

邮箱： info.xa@grapecity.com  |  © 2024 葡萄城软件，保留所有权利

Archiver| 手机版| 小黑屋|

返回顶部