mm-bzu 发表于 2023-1-17 15:09:36

工具栏添加新的按钮得icon

工具栏添加新的按钮得icon到底如何tianjia



Felix.Li 发表于 2023-1-17 15:09:37

mm-bzu 发表于 2023-1-17 16:50
还是不行 跟这个action应该没关系

您可以参考这个代码:

<!DOCTYPE html>
<html lang="en">

<head>
<title>ActiveReports Web 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/">-->

<style>
    body,
    html {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0
    }



    .ar-web-designer {
      width: 100%;
      height: 100%
    }

    .ar-web-designer__loader {
      display: flex;
      width: 100%;
      height: 100%;
      background-color: #205f78;
      color: #fff;
      font-size: 18px;
      animation-name: arwd-loader;
      animation-duration: .62s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-direction: alternate;
      justify-content: center;
      align-items: center
    }
</style>

<link rel="stylesheet" href="vendor/css/fonts-googleapis.css" type="text/css" />
<link rel="stylesheet" href="jsViewer.min.css" />
<link rel="stylesheet" href="web-designer.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<link rel="shortcut icon" href="icons/favicon.ico" />

</head>

<body>

<script src="jsViewer.min.js"></script>
<script src="web-designer.js"></script>
<input id="name" type="text">
<button onclick="getPDF()">获取pdf</button>
<div id="designer-id1" style="width: 100%; height: 100%;"></div>
@*<div id="designer-id2" style="width: 50%; height: 100%;right: 0"></div>*@
<script>

    var viewer = null;
    GrapeCity.ActiveReports.Designer.create('#designer-id1', {
      rpx: { enabled: true },
      documents: {
      fileView: {
          visible: true
      }
      },
      appBar: { openButton: { visible: true } },
      data: { dataSets: { canModify: true }, dataSources: { canModify: true } },
      preview: {
      openViewer: (options) => {
          if (viewer) {
            viewer.openReport(options.documentInfo.id);
            return;
          }
          viewer = GrapeCity.ActiveReports.JSViewer.create({
            element: '#' + options.element,
            renderFormat: 'svg',
            reportService: {
            url: 'api/reporting',
            },
            reportID: options.documentInfo.id,
            settings: {
            zoomType: 'FitPage',
            },
          });
          var PrintBut = {
            key: '$LodopPrint',
            iconCssClass: 'fa fa-bandcamp',
            text: '打印',
            enabled: true,
            action: function (item) {
            console.log("执行")
            }
          };
          viewer.toolbar.desktop.addItem(PrintBut);
      }

      }
    })
</script>
</body>

</html>

首先引入大佬说的css样式:

然后选择自己想要的icon标签(这里可以自己用i标签设计，也可以在网上找，原理都一样，我这里引用网上的CSS，也就是上一步引入的):

获取class标签后引入到我们的里面:

最后呈现的结果:

wengMQ 发表于 2023-1-17 15:24:40

var PrintBut = {
                        key: '$LodopPrint',
                        iconCssClass: 'fa fa-print',
                        text: '打印',
                        enabled: true,
                        action: function (item) {
                           


                        }
                  };
                  viewer.toolbar.desktop.addItem(PrintBut);

wengMQ 发表于 2023-1-17 15:26:21

iconCssClass: 'fa fa-print', 字体图标可以到这个网站找https://fontawesome.dashgame.com/

Felix.Li 发表于 2023-1-17 15:30:13

wengMQ 发表于 2023-1-17 15:26
iconCssClass: 'fa fa-print', 字体图标可以到这个网站找https://fontawesome.dashgame.com/

:hjyzw:
是我们不是直接上传图片，而是CSS的icon图标

mm-bzu 发表于 2023-1-17 15:56:23

我试了你们的方法，还是不行，是不是要下载 这个图库

wengMQ 发表于 2023-1-17 16:12:54

不用下载，你把jsview create代码都截图看下

mm-bzu 发表于 2023-1-17 16:16:39


这丫

wengMQ 发表于 2023-1-17 16:36:34

action: function (item) {
                           
                        }
action的语法你这样写试下

mm-bzu 发表于 2023-1-17 16:50:04


还是不行 跟这个action应该没关系
页: [1] 2
查看完整版本: 工具栏添加新的按钮得icon