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

收藏

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

sheet.isPrintLineVisible(true)

复制代码

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

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

复制代码

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

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

复制代码

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

let customeRibbon = {
"id": "operate",
"text":"自定义操作",
"buttonGroups":[
{
"label": "打印设置",
"commandGroup":{
"children":[
{
"direction": "vertical",
"commands":[
"showHidePrintLine"
]
}
]
}
}
]
}

复制代码

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

let customeRibbonCommand = {
"showHidePrintLine":{
text: "分页预览线",
type: "checkbox",
commandName: "showHidePrintLine",
execute: async(context) => {
let sheet = context.getWorkbook().getActiveSheet()
let isVisible = sheet.isPrintLineVisible()
sheet.isPrintLineVisible(!isVisible)
},
getState: (context) => {
let sheet = context.getWorkbook().getActiveSheet()
return sheet.isPrintLineVisible()
}
}
}

复制代码

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

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

复制代码

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

config.ribbon.push(customeRibbon)

复制代码

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

designer.setConfig(config)

复制代码

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

		自动登录	找回密码
密码			立即注册

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

0 个回复