自定义纸张尺寸的对话框

问题：如何自定义纸张尺寸的对话框

背景：

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

实现方法：

先来看一下UI具体的效果：

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

作者: Richard.Ma | 审核：Lynn.Dou | 更新时间：2023.12.28