如何实现前端批量打印报表

批量打印无论是在 Web端还是桌面端系统都是非常常见的需求，桌面端可以直接访问打印机系统，可以设置免预览，在后台直接批量打印多个文档。

Web端本身因为安全性设置，无法直接访问本地资源，都需要浏览器的打印预览窗口才可以。
但是有很多客户，尤其是生产制造类或医疗行业，需要大量的报表打印工作。尤其是期望一键打印，如图，每一行数据都是对应的一个报表文件，希望点击一次按钮，就可以实现所有的报表文件打印。

ARJS 提供了无预览打印，但是一次只能打印一个报表，如果要同时打印多个报表，就必须考虑拼接成一个文件了。


实现方法：
使用子报表控件，将多个报表文件拼接成一个主报表， ARJS 提供的子报表，可以在一个报表嵌入其他报表，且可同时使用多个子报表文件。

代码：

1. <script>
   
2.     function load()
   
3.     {
   
4.             var subreports = ['/reports/SubReport1.rdlx-json', '/reports/SubReport2.rdlx-json', '/reports/SubReport3.rdlx-json'];
   
5.             var reportItems = [];
   
6.             var subreportTemplate = {
   
7.                 "ZIndex": 1,
   
8.                 "Type": "subreport",
   
9.                 "Top": "",
   
10.                 "Width": "6.5in",
    
11.                 "Height": "2in",
    
12.                 "ReportName": "",
    
13.                 "Name": "Subreport"
    
14.             };
    
15. 
    
16.             //default top position of subreport. Can be any position by default. Also heigh/width can be modified too if necessary
    
17.             var topPosition = 0;
    
18.             var defaultHeight = 2;
    
19. 
    
20.             subreports.forEach((subreport, index) => {
    
21.                 var subreportItem = {...subreportTemplate};
    
22. 
    
23.                 subreportItem.ReportName = subreport;
    
24.                 subreportItem.Name = "Subreport" + index;
    
25.                 subreportItem.Top = topPosition + "in";
    
26. 
    
27.                 reportItems.push(subreportItem);
    
28. 
    
29.                 topPosition = topPosition + defaultHeight;
    
30.             });
    
31.             
    
32.             //fetch doesn't work in IE
    
33.             fetch('/reports/MainReport.rdlx-json').then(response => response.json()).then(reportDefinition => {
    
34.                 //in case if report is empty at all
    
35.                 if(!reportDefinition.Body.ReportItems) reportDefinition.Body.ReportItems = [];
    
36.                 reportDefinition.Body.ReportItems.push(...reportItems);
    
37.                 const viewer = new ActiveReports.Viewer('#ARJSviewerDiv');
    
38.                 viewer.open(reportDefinition);
    
39.                 console.log(reportDefinition);
    
40.             });
    
41.         }
    
42.    
    
43. </script>

复制代码

项目代码如附件