找回密码
 立即注册

QQ登录

只需一步，快速开始

首页 › ActiveReports专区 › 专题教程 › 查看内容
发新帖

KearneyKang 讲师达人认证 悬赏达人认证

超级版主

199

主题

6505

帖子

1万

积分

超级版主

Rank: 8Rank: 8

积分
10804

圣诞拼拼乐微信认证勋章讲师达人悬赏达人元老葡萄

最新发帖

[ActiveReports] JSviewer工具栏的API

KearneyKang 讲师达人认证 悬赏达人认证
超级版主   /  发表于：2020-7-14 10:01  /   查看：7589  /  回复：7
本帖最后由 KearneyKang 于 2020-12-15 10:21 编辑

自从ActiveReportsV13提供 了JSviewer这种新的渲染方式之后，现在web端展示95%的报表使用者都使用了JSviewer这种渲染方式，这种方式展示的好处是：第一渲染速度快
第二UI更美观
第三功能更加完善


下面我们就来说说如何进行工具栏的调整:

1、自定义按钮的添加：

经常我们会有这样的一个需求，就是在工具栏后面进行自定义按钮的添加
参考代码：
  1. <script type="text/javascript">
  2.         let viewer;      
  3.         function loadViewer() {        
  4.             var viewer = GrapeCity.ActiveReports.JSViewer.create({
  5.                 element: '#viewerContainer',
  6.                 reportID: 'Sqlserver多值参数报表1.rdlx',
  7.                 //reportParameters: [{ name: 'P1', values: [1,2,3] }               
  8.                 //],
  9.                 reportService: {},
  10.                 setting: {
  11.                     ZoomType: 'fitpage'
  12.                 }
  13.             });
  14.             pdfExportButton = {
  15.                 key: 'pdfExternalExportButton',
  16.                 iconCssClass: 'mdi mdi-file',
  17.                 text: "PDF Export",
  18.                 title: "PDF Export",
  19.                 checked: true,
  20.                 enabled: true,
  21.                 action: function (item) {
  22.                     var settings = { title: 'Invoice List', userPassword: 'user_Pwd' };
  23.                     var cancelCallback = function () {
  24.                         return false;
  25.                     }
  26.                     viewer.export('pdf', settings, { cancel: cancelCallback })
  27.                         .then(result => result.download("Exported_PDF"));
  28.                 }
  29.             };           
  30.             viewer.toolbar.desktop.addItem(pdfExportButton);         
  31.         }               
  32.     </script>  
复制代码

2、自定义按钮的移除

  2. viewer.toolbar.desktop.removeItem('$pdfExportButton');
复制代码
3、整个工具栏的移除
  1. viewer.toolbar.toggle(false);
复制代码
4、侧边栏的移除
  1. viewer.sidebar.toggle(false);
复制代码
5、打印 按钮的移除
  1. viewer.toolbar.desktop.removeItem('$print');  
复制代码
6、报表刷新
  1. viewer.refresh()
复制代码
7、报表打印
  1. viewer.print()
复制代码
8、报表导出
  1. viewer.export('XLSX', null, true, { FileName: '1997 Annual Report1', Multisheet: false,LayoutMode:"Galley" })
复制代码
9、显示模式，画廊模式：Galley ，分页展示：Paginated
  1. viewer.renderMode = 'Galley';
复制代码
如果是写在报表渲染的加载方法中，画廊模式写成这样

  1.   var viewer = GrapeCity.ActiveReports.JSViewer.create({
  2.         element: '#viewerContainer',
  3.         reportID: 'RDL报表.rdlx;', //报表名称
  4.         //availableExports: ['Xml', 'Pdf'],//导出的方式

  6.         reportService: {},
  7.         renderMode: 'Galley',//画廊模式
  8.         // other properties
  9.         documentLoaded: () => {        
  10.             //   //viewer.print();
  11.             //   //$("#main_toolbar_Item_17").hide();
  12.             //   //$("#main_toolbar_Item_18").hide();
  13.             //   //$("#main_toolbar_Item_19").hide();
  14.             //viewer.export('XLSX', null, true, { FileName: '1997 Annual Report1', Multisheet: false,LayoutMode:"Galley" })
  15.             //viewer.toolbar.toggle(false)
  16.         }
  17.     });
复制代码
10、连续模式
  1. displayMode: 'Continuous',
复制代码

11、全屏幕展示(Fullscreen)
  1. documentLoaded: () => {            
  2.             var x = document.querySelector('[title="Toggle Fullscreen"]');
  3.             x.click();   //全屏幕展示                  
  4.         }
复制代码
12、宽度自适应
  1. viewer._viewer.zoom = { mode: 1 };
复制代码

13、侧边栏导出样式的调整
  1.   availableExports: ['doc', 'docx', 'xlsx', 'xls','pdf'],
复制代码
Word：'doc', 'docx'
Excel：'xlsx', 'xls'
PDF：'pdf'
Xml: 'xml'
JSON: 'json'
  1. <script type="text/javascript">
  2.     var viewer = GrapeCity.ActiveReports.JSViewer.create({
  3.         element: '#viewerContainer',
  4.         reportID: 'RDL报表-图片.rdlx;123;456', //报表名称和参数的传递
  5.        availableExports: ['doc', 'docx', 'xlsx', 'xls','pdf'],//导出样式设置，默认是可以导出所有的样式
  6.         reportService: {},
  7.         renderMode: 'Galley',
  8.         // other properties
  9.         documentLoaded: () => {         
  10.         }
  11.     });
  12. </script>
复制代码
14、前端参数赋值：
  1. reportParameters: [{ name: 'ReportParameter1', values: ['1']}]
复制代码
  1. reportParameters: [{ name: 'P1', values: [1,2,3] },
  2.                            { name: 'P2', values: ['Reports参数2'] }
  3.         ],
复制代码

7 个回复

倒序浏览
fumasoft
金牌服务用户   /  发表于：2020-12-28 14:48:20
沙发
如何把
viewer.export('XLSX', null, true, { FileName: '1997 Annual Report1', Multisheet: false,LayoutMode:"Galley" })
绑定到 ，导出excel的点击事件上
回复 使用道具 举报
KearneyKang讲师达人认证 悬赏达人认证
超级版主   /  发表于：2020-12-28 17:31:47
板凳
你好，使用这个办法可以进行按钮的添加
  1. <script type="text/javascript">
  2.         let viewer;      
  3.         function loadViewer() {        
  4.             var viewer = GrapeCity.ActiveReports.JSViewer.create({
  5.                 element: '#viewerContainer',
  6.                 reportID: 'Sqlserver多值参数报表1.rdlx',
  7.                 //reportParameters: [{ name: 'P1', values: [1,2,3] }               
  8.                 //],
  9.                 reportService: {},
  10.                 setting: {
  11.                     ZoomType: 'fitpage'
  12.                 }
  13.             });
  14.             pdfExportButton = {
  15.                 key: 'pdfExternalExportButton',
  16.                 iconCssClass: 'mdi mdi-file',
  17.                 text: "PDF Export",
  18.                 title: "PDF Export",
  19.                 checked: true,
  20.                 enabled: true,
  21.                 action: function (item) {
  22.                     var settings = { title: 'Invoice List', userPassword: 'user_Pwd' };
  23.                     var cancelCallback = function () {
  24.                         return false;
  25.                     }
  26.                     viewer.export('pdf', settings, { cancel: cancelCallback })
  27.                         .then(result => result.download("Exported_PDF"));
  28.                 }
  29.             };           
  30.             viewer.toolbar.desktop.addItem(pdfExportButton);         
  31.         }               
  32.     </script>  
复制代码
回复 使用道具 举报
fumasoft
金牌服务用户   /  发表于：2020-12-29 13:59:54
地板
请把这个案例发我一下！
回复 使用道具 举报
LoveBaby
注册会员   /  发表于：2021-1-15 17:18:17
5#
我印象中是不是有个可以让报表预览直接用pdf模式的？帮忙回忆一下，我来想办法从那边看有没有机会。谢谢！
回复 使用道具 举报
KearneyKang讲师达人认证 悬赏达人认证
超级版主   /  发表于：2021-1-18 09:44:47
6#
报表预览直接是PDF格式，那么报表的展示是使用Webviewer进行展示，然后使用的是 该模式：“AcrobatReader”具体可以看这里：https://www.grapecity.com/active ... -the-webviewer.html

本帖子中包含更多资源

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

x
回复 使用道具 举报
代码小张
注册会员   /  发表于：2022-9-7 18:08:26
7#
settings 里面的属性有哪些
回复 使用道具 举报
Bella.YuanWyn认证
超级版主   /  发表于：2022-9-7 19:02:21
8#
代码小张 发表于 2022-9-7 18:08
settings 里面的属性有哪些

您好，方便的话还请新开个新贴，具体描述一下您的问题，我们在新贴进行解决，感谢理解~
回复 使用道具 举报
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
产品与服务
活字格低代码平台
Wyn 商业智能软件
SpreadJS纯前端表格控件
技术服务体系
技术博客
低代码技术
客户与案例
典型客户
成功案例
用户访谈
合作与生态
合作伙伴网络
葡萄城市场
葡萄城与国产化
活字格用友客开工具
品牌活动
葡萄城公开课
品牌战略发布会
赋能开发者高峰论坛
企业级低代码发展研讨会
企业级低代码应用大赛
表格技术研讨会
了解葡萄城
葡萄城简介
愿景使命
研发与创新
荣誉奖项
加入我们
联系方式
联系我们
400-657-6008

葡萄城社区二维码

关注“葡萄城社区”

赋能开发者

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

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

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

Archiver| 手机版| 小黑屋|

返回顶部