设计器（designer）添加打印分页预览线

在Excel中，打印时会有预览打印分页线的功能，使用户可以及时看到分页结果，并进行调整。目前设计器（designer）并没有内置这一操作按钮，本文会详细介绍如何在designer上添加打印分页线。
SpreadJS设置打印分页线的API为：

1. sheet.isPrintLineVisible(true)

复制代码

结合该API和自定义designer的方法，就可以完成在designer上添加打印分页预览线的功能了。
Step1: 创建designer；

1. let designer = new GC.Spread.Sheets.Designer.Designer("designer-container")

复制代码

Step2：获取designer默认的config信息：

1. let config = GC.Spread.Sheets.Designer.DefaultConfig

复制代码

Step3: 添加“自定义操作”Tab，在该Tab下添加"打印分页线"功能；

1. let customeRibbon = {
   
2.     "id": "operate",
   
3.     "text":"自定义操作",
   
4.     "buttonGroups":[
   
5.         {
   
6.             "label": "打印设置",
   
7.             "commandGroup":{
   
8.                 "children":[
   
9.                     {
   
10.                         "direction": "vertical",
    
11.                         "commands":[
    
12.                             "showHidePrintLine"
    
13.                         ]
    
14.                     }
    
15.                 ]
    
16.             }
    
17.         }
    
18.     ]
    
19. }

复制代码

Step4：定义Step3中定义的按钮调用命令的逻辑；

1. let  customeRibbonCommand = {
   
2.     "showHidePrintLine":{
   
3.         text: "分页预览线",
   
4.         type: "checkbox",
   
5.         commandName: "showHidePrintLine",
   
6.         execute: async(context) => {
   
7.             let sheet = context.getWorkbook().getActiveSheet()
   
8.             let isVisible = sheet.isPrintLineVisible()
   
9.             sheet.isPrintLineVisible(!isVisible)
   
10.         },
    
11.         getState: (context) => {
    
12.             let sheet = context.getWorkbook().getActiveSheet()
    
13.             return sheet.isPrintLineVisible()
    
14.         }
    
15. 
    
16.     }
    
17. }

复制代码

Step5：将定义好的命令逻辑添加到config.commandMap中；
config中新增的自定义命令都定义在config.commandMap中，初始时可以给其赋值一个空对象，之后将新定义的command与config.commandMap做合并。

1. config.commandMap = {}
   
2. Object.assign(config.commandMap,customeRibbonCommand)

复制代码

Step6：将自定义的ribbon添加到designer的Ribbon集中；

1. config.ribbon.push(customeRibbon)

复制代码

Step7：将新的config信息赋给当前designer；

1. designer.setConfig(config)

复制代码

以上所有操作完成之后，就可以看到，当前designer中多出了一个“自定义操作”的Tab，该Tab下会有“打印分页线”的选项功能。
演示demo地址：https://jscodemine.grapecity.com/share/C2NYV9QLE0SmTaPBGhaLTg/
由于demo平台地址部署在国外，打开时间可能会久一些，请耐心等待哦~