JSviewer工具栏的API

自从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、自定义按钮的移除

1. 
   
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'],//导出的方式
   
5. 
   
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.         ],

复制代码

如何把
viewer.export('XLSX', null, true, { FileName: '1997 Annual Report1', Multisheet: false,LayoutMode:"Galley" })
绑定到 ，导出excel的点击事件上

你好，使用这个办法可以进行按钮的添加

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>  

复制代码

请把这个案例发我一下！

我印象中是不是有个可以让报表预览直接用pdf模式的？帮忙回忆一下，我来想办法从那边看有没有机会。谢谢！

报表预览直接是PDF格式，那么报表的展示是使用Webviewer进行展示，然后使用的是 该模式：“AcrobatReader”具体可以看这里：https://www.grapecity.com/active ... -the-webviewer.html

settings 里面的属性有哪些

代码小张 发表于 2022-9-7 18:08
settings 里面的属性有哪些

您好，方便的话还请新开个新贴，具体描述一下您的问题，我们在新贴进行解决，感谢理解~