SpreadJS分离浏览器与打印预览内容

在高度依赖模板文件填报数据的场景，通过SpreadJS的Worksheet、Table、单元格等三个级别的数据绑定可灵活实现数据填报，绑定的依据正是模板文件中定义好的数据结构。一般情况下，填报后即可在浏览器页面上看到数据。然而，出于各种各样的需求考虑，需求方希望用户在浏览器页面的Worksheet中能够看到的始终只是模板文件内容，即数据结构，而数据填报后的内容在打印预览页面中显示，如图1所示。

图1. Worksheet和打印预览内容不同

就这样的需求，拆分为两个组成部分，其一是Worksheet可视内容，另一则是打印预览可视内容。我们都知道打印预览中的可视内容是Worksheet中可视内容结合打印设置产生的综合结果，即，传统地，Worksheet页面可视内容和打印预览页面可视内容一致，如图2所示。当下的需求显然要求Worksheet中可视内容和打印预览可视内容不一致，能否实现呢？还是先分析一下，再定结论。

图2. Worksheet和打印预览内容相同

传统的打印预览页面中的内容源于Worksheet中的内容，打印设置由Worksheet控制，而打印功能则由Workbook控制，即Workbook:print()。那么，便有可能创建一个从浏览器页面看不到的Workbook，在其中的Worksheet完成数据填报并提供打印预览功能。具体方案如下：

1. 自定义打印预览按钮。
2. 不依赖HTML Dom元素创建Workbook，记为ShadowWorkbook。
3. 使用ShadowWorkbook中的默认Worksheet，或在其中新建Worksheet，记为ShadowWorksheet。
4. 在ShadowWorksheet中，读入页面可视的模板文件，并根据既定的数据填报规则填报数据。
5. 在点击自定义打印预览按钮时，通过ShadowWorkbook触发print方法，以提供预览数据填报后的内容。

如此，便可将浏览器可视的Worksheet展示内容和打印预览展示内容分离开，达到展示不同内容的目的。附上代码，以供参考。