给组件版编辑器添加一个自定义纸张尺寸的对话框

收藏

本帖最后由 Richard.Ma 于 2023-6-30 15:12 编辑

当前组件版编辑器支持用户选择纸张类型，但是如果要自定义纸张的宽高，目前没有提供对应的UI界面。页面设置对话框中也无法设置。

这篇教程介绍如何给组件版编辑器添加一个自定义纸张尺寸的对话框

先来看一下UI具体的效果，
image.png339556884.png

通过这个简单的对话框，在填写宽高然后点击确认后，即可给当前sheet设置纸张的宽高

下面是实现此功能的具体步骤

1.添加一个对话框模板template

对话框模板定义了对话框中的元素。可以看到里面添加了2个NumberEditor，并且bindingPath分别为width和height，用于绑定宽高变量

var CustomPaperSizeTemplate = {
templateName: "CustomPaperSizeTemplate",
title: "设置自定义纸张尺寸",
width: 300,
height: 200,
content: [{
type: "FlexContainer",
children: [{
type: "TextBlock",
text: "设置纸张自定义宽高",
margin: "5px 10px"
},
{
type: "Column",
width: "auto",
children: [{
type: "ColumnSet",
children: [{
"type": "Column",
"width": "50px",
"children": [{
"type": "TextBlock",
"margin": "5px 10px -5px 10px",
"text": "宽:"
}]
},
{
"type": "Column",
"width": "auto",
"children": [{
type: "NumberEditor",
bindingPath: "width",
margin: "5px 10px"
}]
}
]
},
{
type: "ColumnSet",
width: "160px",
children: [{
"type": "Column",
"width": "50px",
"children": [{
"type": "TextBlock",
"margin": "5px 10px",
"text": "高:"
}]
},
{
"type": "Column",
"width": "auto",
"children": [{
type: "NumberEditor",
bindingPath: "height",
margin: "5px 10px"
}]
}
]
},
]
},
]
}]
};

复制代码

2新建一个命令，用于弹出对话框

这段代码新建了一个命令，通过调用showDialog方法，传入了宽高参数，弹出刚刚创建的对话框，并且在对话框确认关闭后拿到修改的数据来进行应用。

var paperSizeDialog = {
title: "自定义纸张尺寸",
text: "自定义纸张尺寸",
"direction": "horizontal",
commandName: "cmdPaperSizeDialog",
iconClass: "ribbon-button-pageSetup-size",
bigButton: true,
type: 'button', // 单击按钮命令时，将调用执行函数。
execute: (context, propertyName) => {
var custompapersize = designer.getData("custompapersize")
GC.Spread.Sheets.Designer.showDialog("CustomPaperSize", {
width: custompapersize.width,
height: custompapersize.height
}, (result) => {
console.log(result);
let {
width,
height
} = result; // 结果的数据结构.
designer.setData("custompapersize", {
width: width,
height: height
})
let spread = context.getWorkbook();
let sheet = spread.getActiveSheet();
sheet.printInfo().paperSize(new GC.Spread.Sheets.Print.PaperSize(width, height));
}, (e) => { // 错误回调
console.log(e);
}, (result) => { // 有效回调，用于检查结果值是否有效。如果没有，对话框将无法关闭。
return result;
});
}
}

复制代码

3，应用上述模板和命令到编辑器中

function adddlg(config) {
config.commandMap = {};
GC.Spread.Sheets.Designer.registerTemplate("CustomPaperSize", CustomPaperSizeTemplate);
var config = GC.Spread.Sheets.Designer.ToolBarModeConfig;
config.commandMap["cmdPaperSizeDialog"] = paperSizeDialog;
var command = {
text: "纸张尺寸",
id: "time",
buttonGroups: [{
commandGroup: {
"children": [
"cmdPaperSizeDialog"
]
}
}]
};
config.ribbon.panels[2].buttonGroups[0].commandGroup.children.splice(4, 0, "cmdPaperSizeDialog");
}

复制代码

config = GC.Spread.Sheets.Designer.ToolBarModeConfig;
designer.setData("custompapersize", {
width: 50,
height: 50
})
adddlg(config);
designer.setConfig(config);
designer.refresh();

复制代码

4.处理页面设置对话框重置纸张宽高的问题

由于编辑器本身不支持自定义纸张尺寸，所以页面设置对话框在关闭时会把sheet的自定义纸张宽高重置为0，我们需要监听这个操作来避免此问题

spread = designer.getWorkbook();
spread.commandManager().addListener('', function (args) {
var command = args.command;
if (command.cmd == "Designer.setPageLayout" && command.paperKind == 0) {
var custompapersize = designer.getData("custompapersize");
spread.getActiveSheet().printInfo().paperSize(new GC.Spread.Sheets.Print.PaperSize(custompapersize.width, custompapersize.height));
}
});

复制代码

最后，例行附上此示例的项目代码

custompapersize.zip (3.6 KB, 下载次数: 26)

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

给组件版编辑器添加一个自定义纸张尺寸的对话框

0 个回复

浏览过的版块

SpreadJS 认证

SpreadJS 高级认证

讲师达人

悬赏达人