SpreadJS打印预览

SpreadJS V15.0之后，在线表格设计器（designer）已经在UI行为上实现了打印预览的功能，具体如下图所示：

但是在很多使用场景中，用户可能并不会集成设计器，只是嵌入了表格区域，想要通过自己写一个按钮的方式，来实现打印预览的需求。本文会针对这一应用场景，提供一种实现打印预览的方式。
Step1:  监听beforePrint事件；

1. spread.bind(GC.Spread.Sheets.Events.BeforePrint,function(e,data){
   
2.     sjsiframe = data.iframe
   
3.     sjsiframe.style.width = '800px'
   
4.     sjsiframe.style.height = '600px'
   
5.     sjsiframe.style.position = 'fixed'
   
6.     sjsiframe.style.top = '200px'
   
7.     sjsiframe.style.left = '200px'
   
8.     sjsiframe.style.background = '#ffffff'
   
9.     data.cancel = true
   
10. })
    

复制代码

在BeforePrint事件中，data.iframe代表的是当前打印的dom结构，可以在控制台中的dom结构查看，默认这个iframe的宽高都是0，不会显示。因此需要在打印之前修改这个iframe的宽高，使其显示出来。

Step2： 实现打印逻辑；

1. document.getElementById('preview').onclick = function(){
   
2.     let sheet = spread.getActiveSheet()
   
3.     let printInfo = new GC.Spread.Sheets.Print.PrintInfo()
   
4.     printInfo.showColumnHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide)
   
5.     printInfo.showRowHeader(GC.Spread.Sheets.Print.PrintVisibilityType.hide)
   
6.     sheet.printInfo(printInfo)
   
7.     spread.print()
   
8. }
   

复制代码

完整的demo参考：https://jscodemine.grapecity.com/share/rL2Gldldckq6azOVP9vtEg/