如何在ASP.NET中使用QuestPDF生成文本内嵌的日期输入掩码

问题说明 #

在ASP.NET应用中使用QuestPDF生成PDF时，可正常生成独立的日期输入掩码，但无法实现文本内嵌的日期输入掩码（即日期掩码与前后文本在同一行对齐），尝试代码后效果不符合预期。

效果对比 #

• 已实现的独立日期输入掩码：
  

• 目标文本内嵌日期输入掩码：
  

• 尝试后的不理想效果：
  

现有代码 #

实现独立日期输入掩码的代码 #

page.Footer().Column(col =>
{
   col.Item().Row(row =>
   {
      row.RelativeItem(0.73f).Row(innerRow =>
      {
         innerRow.AutoItem().Text("Dated this").FontSize(10);
         innerRow.ConstantItem(65).PaddingTop(7, Unit.Millimetre).Column(innserCol =>
         {
            innserCol.Item().LineHorizontal(0.05f);
            innserCol.Item().AlignCenter().Text("day of month").FontSize(10);
         });
         innerRow.AutoItem().Text("day of").FontSize(10);
         innerRow.ConstantItem(80).PaddingTop(7, Unit.Millimetre).Column(innserCol =>
         {
            innserCol.Item().LineHorizontal(0.05f);
            innserCol.Item().AlignCenter().Text("month").FontSize(10);
         });
         innerRow.AutoItem().Text(" ' ").FontSize(10);
         innerRow.ConstantItem(35).PaddingTop(7, Unit.Millimetre).Column(innserCol =>
         {
            innserCol.Item().LineHorizontal(0.05f);
            innserCol.Item().AlignCenter().Text("year").FontSize(10);
         });
         innerRow.AutoItem().Text(" ' at").FontSize(10);
         innerRow.ConstantItem(60).PaddingTop(7, Unit.Millimetre).Column(innserCol =>
         {
            innserCol.Item().LineHorizontal(0.05f);
            innserCol.Item().AlignCenter().Text("time of day").FontSize(10);
         });
         innerRow.AutoItem().MinimalBox().Width(12, Unit.Point).Height(12, Unit.Point).Border(0.5f, Unit.Point);
         innerRow.AutoItem().PaddingLeft(5, Unit.Point).Text("am").FontSize(10).FontColor(Colors.Black);
         innerRow.AutoItem().PaddingLeft(8, Unit.Point).MinimalBox().Width(12, Unit.Point).Height(12, Unit.Point).Border(0.5f, Unit.Point);
         innerRow.AutoItem().PaddingLeft(5, Unit.Point).Text("pm").FontSize(10).FontColor(Colors.Black);
      });

      row.RelativeItem(0.02f);

      row.RelativeItem(0.25f).Column(col =>
      {
         col.Item().AlignLeft().Text("Signature").FontSize(10);
         col.Item().Height(25, Unit.Point);
         col.Item().LineHorizontal(0.05f);
      });
   });
});

尝试生成文本内嵌日期输入掩码的代码 #

col.Item().Row(row =>
{
   row.RelativeItem(0.73f).Row(innerRow =>
   {
      innerRow.RelativeItem()
          .AlignLeft()
          .Text(text =>
          {
             text.Span("I (we) appoint the proxy named in row A below, or, failing him or her, the proxy named in row B below, to attend and vote on my (our) behalf at the meeting of owners to be held on ")
 .FontSize(11);

             text.Element().Row(dateRow =>
             {
                dateRow.ConstantItem(40).PaddingTop(2, Unit.Millimetre).Column(innerCol =>
                {
                   innerCol.Item().LineHorizontal(0.5f);
                   innerCol.Item().AlignCenter().Text("yyyy").FontSize(10);
                });

                dateRow.AutoItem().Text("/").FontSize(11);

                dateRow.ConstantItem(30).PaddingTop(2, Unit.Millimetre).Column(innerCol =>
                {
                   innerCol.Item().LineHorizontal(0.5f);
                   innerCol.Item().AlignCenter().Text("mm").FontSize(10);
                });

                dateRow.AutoItem().Text("/").FontSize(11);

                dateRow.ConstantItem(30).PaddingTop(2, Unit.Millimetre).Column(innerCol =>
                {
                   innerCol.Item().LineHorizontal(0.5f);
                   innerCol.Item().AlignCenter().Text("dd").FontSize(10);
                });
             });

             text.Span(", and at any adjournment of the meeting:").FontSize(11);
          });
   });

   row.RelativeItem(0.02f);

   row.RelativeItem(0.25f);
});

解决方案 #

问题根源在于QuestPDF的Text组件内的Element()是块级元素，会自动换行，无法和前后Span在同一行对齐。正确做法是将整个段落拆分为行内元素，用Row容器统一包裹文本片段和日期掩码组件，让它们在同一行水平对齐并居中对齐文本基线。

修改后的代码如下：

col.Item().Row(row =>
{
    row.RelativeItem(0.73f).Row(innerRow =>
    {
        // 第一个文本片段
        innerRow.AutoItem().AlignCenter().Text("I (we) appoint the proxy named in row A below, or, failing him or her, the proxy named in row B below, to attend and vote on my (our) behalf at the meeting of owners to be held on ").FontSize(11);

        // 内嵌日期掩码
        innerRow.AutoItem().AlignCenter().Row(dateRow =>
        {
            dateRow.ConstantItem(40).PaddingTop(2, Unit.Millimetre).Column(innerCol =>
            {
                innerCol.Item().LineHorizontal(0.5f);
                innerCol.Item().AlignCenter().Text("yyyy").FontSize(10);
            });

            dateRow.AutoItem().Text("/").FontSize(11).AlignCenter();

            dateRow.ConstantItem(30).PaddingTop(2, Unit.Millimetre).Column(innerCol =>
            {
                innerCol.Item().LineHorizontal(0.5f);
                innerCol.Item().AlignCenter().Text("mm").FontSize(10);
            });

            dateRow.AutoItem().Text("/").FontSize(11).AlignCenter();

            dateRow.ConstantItem(30).PaddingTop(2, Unit.Millimetre).Column(innerCol =>
            {
                innerCol.Item().LineHorizontal(0.5f);
                innerCol.Item().AlignCenter().Text("dd").FontSize(10);
            });
        });

        // 最后一个文本片段
        innerRow.AutoItem().AlignCenter().Text(", and at any adjournment of the meeting:").FontSize(11);
    });

    row.RelativeItem(0.02f);
    row.RelativeItem(0.25f);
});

关键调整点 #

1. 移除Text组件内的嵌套Element()，改用外层Row的多个AutoItem()分别承载文本片段和日期掩码。
2. 给每个AutoItem()添加AlignCenter()，确保文本和日期掩码的基线对齐，避免上下错位。
3. 日期掩码的Row容器同样设置AlignCenter()，保证内部元素和外部文本对齐。

内容的提问来源于stack exchange，提问作者Alien