[{"id":"b66f8b1e-cc14-4e89-9679-abd5687d283d","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"569bb90a-ea68-46c6-96f1-ab151c120714","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"5eb52f08-2d1a-4362-9ffc-4871bdc10f3f","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"341dd607-b97d-4d70-bde2-53acda6b6c95","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"05349273-414f-4208-9ea2-c4fc8f4ea2cb","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"86089f76-b778-4d52-821e-6f27de3df613","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"b81e4fd6-1fc5-43a0-a258-b6e16a5cbec6","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"8aa8ce31-43e4-438e-951f-241608435260","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"37343f41-6ec2-4c7e-b21d-2cc18d5ce1e0","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"5915e52f-64f8-4146-b8bd-81bead6324a3","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"836ba889-af9e-460d-a4cc-c24d922795f2","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"4ae14b06-bb68-4394-a210-a46b8f028346","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"d8f42066-e9dc-4411-bdcf-43b1a203370c","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"7ef86f16-b1a0-49f7-9592-612b9be02b25","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"b29c7775-a9a4-451e-a1b5-01d19ed5ca5e","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"e56f3989-8f81-46af-90fa-a4813eeb976f","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"2526c963-f170-45a8-923e-91b0712a9810","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"24575cf0-501a-44f9-8426-c40f8f4b5552","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"1a6f8d7f-acd6-42be-8c4f-f464c6218381","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"82b176fd-5cab-498c-909e-8fa7d29c38d8","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"1708b3a9-4f37-44a8-8f0e-f9a2d2e5d940","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"c9ac246e-29fb-4bc4-8231-8439795bb590","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"94f2a5c3-2539-436a-af75-23fbbd1a3957","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"d99594f4-2d40-4df4-9419-ba2ca6aa3f7f","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"fd66e72d-0f10-4f57-9807-6db26290ab2e","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"8f344863-503d-4bc3-a594-3815e7d55f5c","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"9be82601-de9d-4c18-948a-23ab6f4dd431","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"6495f3c0-b463-47e0-b08a-ca949672211e","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"b4bede08-3f08-4839-ba4a-abc7ac195bde","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"4afcdfc0-3ff5-4f2b-a223-f8fc042a5bbe","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"422062c4-fa40-4771-a86f-008efe6d86e5","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"d87e8013-86a7-4840-8d25-6f62e14eb4ac","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"a6acedfd-4043-4c64-a5d1-aec3326df9e7","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"dbdc0b24-06c4-48b9-8d6c-7455119dc773","tags":[{"product":null,"links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60","name":"\u65B0\u589E","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"a3856849-954a-4cfc-96a6-382e530d3638","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]},{"id":"4a39306b-ffa5-433d-80a3-28e41f929b72","tags":[{"product":null,"links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf","name":"\u66F4\u65B0","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97"}]}]
        
(Showing Draft Content)

自定义纸张尺寸的对话框

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


背景:

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

实现方法:

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

image

image


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