Web端导出Excel时属性的设置

由于在导出Excel的时候，报表存在分页的情况，当导出Excel的时候会出现多个Sheet的情况。但是在实际生产中，有时候是不需要导出多个sheet的，因此就要进行一些对应属性的设置。

当使用WebViewer进行报表的渲染，然后在前端进行报表的导出时进行的属性设置

由于是有Webviewer渲染报表，工具栏默认没有导出按钮的，因此需要我们自己进行对应的按钮的添加，并且在进行属性的设置。

具体的实现代码如下：

1. <script language="javascript" type="text/javascript">  
   
2. 
   
3.     var exportSelect = '<select id="ExportSelect" style="width:80px"><option selected disabled>Export</option><option value="PDF" style="background: url(images/pdf.png) right no-repeat; width: 50px">PDF</option><option value="Excel" style="background: url(images/Excel.gif) right no-repeat; width: 50px">Excel</option></select>';
   
4. 
   
5.        $(document).ready(function () {
   
6. 
   
7.         $(".arvToolBar").append(exportSelect);
   
8. 
   
9.         $("#ExportSelect").change(function (e, args) {
   
10. 
    
11.             var viewModel = GetViewModel("WebViewer1");
    
12. 
    
13.             var valueSelected = this.value;
    
14. 
    
15.             if (viewModel.PageLoaded()) {
    
16. 
    
17.                 switch (valueSelected) {
    
18. 
    
19.                     case "PDF":
    
20. 
    
21.                         viewModel.Export(ExportType.Pdf, function (uri) {
    
22. 
    
23.                             window.location = uri;
    
24. 
    
25.                         }, true);
    
26. 
    
27.                         break;
    
28. 
    
29.                     case "Excel":
    
30. 
    
31.                         viewModel.Export(ExportType.Xls,  function (uri) {
    
32.                             window.location = uri;
    
33.                         }, true,
    
34. 
    
35.                        { FileName: 'Test1', MultiSheet: true });//导出属性的设置
    
36.                         break;
    
37.                 }
    
38. 
    
39.             }
    
40. 
    
41.         });
    
42. 
    
43.     });
    
44. 
    
45. </script><span style="color: black; font-family: 新宋体; font-size: 9.5pt; background-color: rgb(255, 255, 255);"> </span>

复制代码

当使用Html5进行报表渲染的时候，由于使用Html5进行渲染报表，工具栏里是有导出按钮的，为了整体UI的美观性，因此不需要再在页面上添加一个按钮，然后单独进行导出Excel属性的设置。可以进行如下的操作。

(1)找到导出对应的JS文件，就是我们项目中引用的GrapeCity.ActiveReports.Viewer.Html.js JS文件

(2)然后找到对应的导出属性设置的具体代码。

(3)在进行 对应的属性的设置：

1. exportTo: function(exportType) {
   
2.                 return {
   
3.                     exec: function() {
   
4.                         var options = {
   
5.                             FileName: viewer.report().reportName,
   
6.                             PreviewPages: 0 ,
   
7.                             Pagination: false,                        
   
8.                             MutiSheet: false                                                               
   
9.                         };
   
10.                         _isExportProcessing(!0), viewer.document().export(exportType, options, viewer.report().parameters()).done(function(exportUrl) {
    
11.                             if (_isExportProcessing(!1), exportUrl) {
    
12.                                 var exportWindow = null;
    
13.                                 try {
    
14.                                     exportWindow = window.open(exportUrl + "&Attachment=1", "_blank"), exportWindow && exportWindow.focus();
    
15.                                 } catch (e) {}
    
16.                                 exportWindow || viewer.callExportCallback(exportUrl + "&Attachment=1", function(url) {
    
17.                                     window.location = url;
    
18.                                 });
    
19.                             }
    
20.                         });
    
21.                     },
    
22.                     enabled: _isDocReady
    
23.                 };
    
24.             },

复制代码

当使用JSviewer渲染报表的时候，由于JSviewer现在的JS文件中没有提供对应的API所有我们需要自己自定义一个导出按钮，然后进行对应的导出的设置

实现代码如下：

1. viewer = GrapeCity.ActiveReports.JSViewer.create({
   
2. 
   
3.             element: '#viewerContainer', documentLoaded: () => viewer.export('XLSX', null, true, { FileName: '1997 Annual Report1', Multisheet: false,LayoutMode:"Galley" })
   
4.         });
   
5. 
   

复制代码