KearneyKang 发表于 2020-7-14 10:01:50

JSviewer工具栏的API

本帖最后由 KearneyKang 于 2020-12-15 10:21 编辑

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


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

1、自定义按钮的添加:

经常我们会有这样的一个需求,就是在工具栏后面进行自定义按钮的添加
参考代码:<script type="text/javascript">
      let viewer;      
      function loadViewer() {      
            var viewer = GrapeCity.ActiveReports.JSViewer.create({
                element: '#viewerContainer',
                reportID: 'Sqlserver多值参数报表1.rdlx',
                //reportParameters: [{ name: 'P1', values: }               
                //],
                reportService: {},
                setting: {
                  ZoomType: 'fitpage'
                }
            });
            pdfExportButton = {
                key: 'pdfExternalExportButton',
                iconCssClass: 'mdi mdi-file',
                text: "PDF Export",
                title: "PDF Export",
                checked: true,
                enabled: true,
                action: function (item) {
                  var settings = { title: 'Invoice List', userPassword: 'user_Pwd' };
                  var cancelCallback = function () {
                        return false;
                  }
                  viewer.export('pdf', settings, { cancel: cancelCallback })
                        .then(result => result.download("Exported_PDF"));
                }
            };         
            viewer.toolbar.desktop.addItem(pdfExportButton);         
      }               
    </script>
2、自定义按钮的移除

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

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

      reportService: {},
      renderMode: 'Galley',//画廊模式
      // other properties
      documentLoaded: () => {      
            //   //viewer.print();
            //   //$("#main_toolbar_Item_17").hide();
            //   //$("#main_toolbar_Item_18").hide();
            //   //$("#main_toolbar_Item_19").hide();
            //viewer.export('XLSX', null, true, { FileName: '1997 Annual Report1', Multisheet: false,LayoutMode:"Galley" })
            //viewer.toolbar.toggle(false)
      }
    }); 10、连续模式
displayMode: 'Continuous',
11、全屏幕展示(Fullscreen)documentLoaded: () => {            
            var x = document.querySelector('');
            x.click();   //全屏幕展示                  
      }12、宽度自适应 viewer._viewer.zoom = { mode: 1 };
13、侧边栏导出样式的调整
availableExports: ['doc', 'docx', 'xlsx', 'xls','pdf'],Word:'doc', 'docx'
Excel:'xlsx', 'xls'
PDF:'pdf'
Xml: 'xml'
JSON: 'json'
<script type="text/javascript">
    var viewer = GrapeCity.ActiveReports.JSViewer.create({
      element: '#viewerContainer',
      reportID: 'RDL报表-图片.rdlx;123;456', //报表名称和参数的传递
       availableExports: ['doc', 'docx', 'xlsx', 'xls','pdf'],//导出样式设置,默认是可以导出所有的样式
      reportService: {},
      renderMode: 'Galley',
      // other properties
      documentLoaded: () => {         
      }
    });
</script>14、前端参数赋值:reportParameters: [{ name: 'ReportParameter1', values: ['1']}] reportParameters: [{ name: 'P1', values: },
                           { name: 'P2', values: ['Reports参数2'] }
      ],










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

你好,使用这个办法可以进行按钮的添加
<script type="text/javascript">
      let viewer;      
      function loadViewer() {      
            var viewer = GrapeCity.ActiveReports.JSViewer.create({
                element: '#viewerContainer',
                reportID: 'Sqlserver多值参数报表1.rdlx',
                //reportParameters: [{ name: 'P1', values: }               
                //],
                reportService: {},
                setting: {
                  ZoomType: 'fitpage'
                }
            });
            pdfExportButton = {
                key: 'pdfExternalExportButton',
                iconCssClass: 'mdi mdi-file',
                text: "PDF Export",
                title: "PDF Export",
                checked: true,
                enabled: true,
                action: function (item) {
                  var settings = { title: 'Invoice List', userPassword: 'user_Pwd' };
                  var cancelCallback = function () {
                        return false;
                  }
                  viewer.export('pdf', settings, { cancel: cancelCallback })
                        .then(result => result.download("Exported_PDF"));
                }
            };         
            viewer.toolbar.desktop.addItem(pdfExportButton);         
      }               
    </script>

fumasoft 发表于 2020-12-29 13:59:54

请把这个案例发我一下!

LoveBaby 发表于 2021-1-15 17:18:17

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

KearneyKang 发表于 2021-1-18 09:44:47

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

代码小张 发表于 2022-9-7 18:08:26

settings 里面的属性有哪些

Bella.Yuan 发表于 2022-9-7 19:02:21

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

您好,方便的话还请新开个新贴,具体描述一下您的问题,我们在新贴进行解决,感谢理解~
页: [1]
查看完整版本: JSviewer工具栏的API