工具栏添加新的按钮得icon

登录

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

Felix.Li · Felix.Li

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">
<base href="/">
<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 · wengMQ

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


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

wengMQ · wengMQ

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

Felix.Li · Felix.Li

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

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

mm-bzu · mm-bzu

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

wengMQ · wengMQ

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

mm-bzu · mm-bzu

这丫

wengMQ · wengMQ

action: function (item) {

}
action的语法你这样写试下

mm-bzu · mm-bzu

还是不行跟这个action应该没关系

		自动登录	找回密码
密码			立即注册

[已处理] 工具栏添加新的按钮得icon

最佳答案

16 个回复

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

Wyn高级认证

Wyn认证

悬赏达人

圣诞拼拼乐

微信认证勋章