使用GemBox.Document转HTML到PDF丢失样式布局的解决求助

问题概述 #

使用最新版GemBox.Document将HTML转换为PDF时，出现以下三个问题：

• HTML区域尺寸丢失
• Times New Roman字体未生效
• flex布局的元素间距异常

针对性解决方案 #

1. 修复HTML区域尺寸丢失问题 #

GemBox.Document默认会将HTML内容适配到标准PDF页面尺寸，需手动设置PDF页面的大小和边距，使其与HTML容器的尺寸匹配：

• 计算容器总尺寸：.main-container宽度383.62px + 左右padding各48px = 479.62px；高度576.95px + 上下padding各96px = 768.95px
• 在HtmlLoadOptions中配置PageSetup，指定对应的页面宽高，同时将边距设为0

2. 修复Times New Roman字体未生效问题 #

• CSS中字体名称错误：将TimesNewRoman改为'Times New Roman'
• 确保GemBox能访问到该字体，若系统未安装，可通过FontSettings指定字体文件路径，或启用字体嵌入

3. 修复flex布局间距异常问题 #

• 给flex容器添加align-items: center，确保子元素垂直对齐
• 将label元素设置为display: inline-block，避免行内元素默认间距影响布局
• 确认flex子元素的宽度设置（50%）正确生效，避免溢出或收缩

修改后的代码 #

修改后的HTML代码 #

<html>
<head>
  <style>
    .main-container {
      width: 383.62px;
      height: 576.95px;
      text-align: center;
      padding: 96px 48px;
      font-family: Verdana; 
      box-sizing: border-box; /* 确保padding包含在尺寸内 */
    }
    .code {
      font-size: 25px;
      font-weight: bold;
      letter-spacing: 1px;
    }
    .mrg-btm {
      margin-bottom: 8px;
    }
    .name-and-code {
      font-size: 24px;
      font-weight: bold;
      letter-spacing: 3px;
    }
    .flex-div {
      display: flex;
      flex-direction: row;
      width: 100%;
      align-items: center; /* 新增：垂直对齐子元素 */
    }
    .distance-one {
      width: 50%;
      text-align: left;
      font-size: 14px;
      display: inline-block; /* 新增：转为块级行内元素 */
    }
    .distance-two {
      width: 50%;
      text-align: right;
      font-size: 14px;
      display: inline-block; /* 新增：转为块级行内元素 */
    }
    .font-bold {
      font-weight: bold;
    }
    .scadenza {
      font-size: 24px;
      font-weight: bold;
      letter-spacing: 3px;
    }
    .data-scadenza {
      font-size: 24px;
      font-weight: bold;
      letter-spacing: 2px;
    }
    .materiali {
      font-size: 24px;
      font-weight: bold;
      text-align: left;
      letter-spacing: 5px;
    }
    .last-codes {
      display: flex;
      flex-direction: row;
      font-size: 14px;
      text-align: left;
      font-family: 'Times New Roman'; /* 修正字体名称 */
      align-items: center; /* 新增：垂直对齐 */
    }
    .mrg-btm-two {
      margin-bottom: 64px;
    }
    .mrg-btm-three {
      margin-bottom: 16px;
    }
    .mrg-btm-four {
      margin-bottom: 20px;
    }
    .mrg-rgt-one {
      margin-right: 20px;
      display: inline-block; /* 新增 */
    }
    .mrg-rgt-two {
      margin-right: 8px;
      display: inline-block; /* 新增 */
    }
    .mrg-rgt-three {
      margin-right: 16px;
      display: inline-block; /* 新增 */
    }
  </style>
</head>
<body>
  <div class="main-container">
    <div class="code mrg-btm">
      <label>STM0583A0</label>
    </div>
    <div class="name-and-code mrg-btm-four">
      <label>TUNISI&nbsp;&nbsp;0583</label>
    </div>
   <div class="mrg-btm-four">
     <img alt='Barcode Generator TEC-IT'
     src='https://barcode.tec-it.com/barcode.ashx?data=02329747&code=Code39'/>
  </div>
  <div class="flex-div mrg-btm">
    <label class="distance-one">SqA</label>
    <label class="distance-two font-bold">2481m&nbsp;&nbsp;&nbsp;(#13)</label>
  </div>
  <div class="flex-div mrg-btm-three">
    <label class="distance-one">GOMSET1&nbsp;&nbsp;&nbsp;(#2)</label>
    <label class="distance-two">11/10/2022</label>
  </div>
  <div class="scadenza mrg-btm">
      <label>Scadenza</label>
  </div>
  <div class="data-scadenza mrg-btm">
      <label>31/10/2022</label>
  </div>
  <div class="materiali mrg-btm">
      <label>Materiali</label>
  </div>
  <div class="last-codes mrg-btm-two">
      <label class="mrg-rgt-one">RC1812</label>
      <label>000331799805</label>
  </div>
  <div class="last-codes mrg-btm">
      <label class="mrg-rgt-two">SB00040A0</label>
      <label class="mrg-rgt-two">STR1026420</label>
      <label>25/10/2022</label>
  </div>
  <div class="last-codes">
      <label class="mrg-rgt-two">C-1812</label>
      <label class="mrg-rgt-three">RC1812</label>
      <label>000331799805</label>
  </div>
  </div>
</body>
</html>

修改后的C#代码 #

GemBox.Document.ComponentInfo.SetLicense("FREE-LIMITED-KEY");

// 配置HTML加载选项
var htmlLoadOptions = new HtmlLoadOptions();
// 设置PDF页面尺寸与HTML容器匹配（换算为英寸：1px ≈ 0.013889英寸）
htmlLoadOptions.PageSetup.PageWidth = GemBox.Document.LengthUnitConverter.Convert(479.62, GemBox.Document.LengthUnit.Point, GemBox.Document.LengthUnit.Inch);
htmlLoadOptions.PageSetup.PageHeight = GemBox.Document.LengthUnitConverter.Convert(768.95, GemBox.Document.LengthUnit.Point, GemBox.Document.LengthUnit.Inch);
// 设置页面边距为0
htmlLoadOptions.PageSetup.Margins.Top = 0;
htmlLoadOptions.PageSetup.Margins.Bottom = 0;
htmlLoadOptions.PageSetup.Margins.Left = 0;
htmlLoadOptions.PageSetup.Margins.Right = 0;

// 加载HTML并保存为PDF
var document = DocumentModel.Load(filenameHtml, htmlLoadOptions);
document.Save(path + pdfFilename);

补充说明 #

• 若Times New Roman字体仍未生效，可添加以下代码指定字体路径（需替换为实际字体文件路径）：

FontSettings.FontsBaseDirectory = @"C:\Windows\Fonts";

• 启用字体嵌入确保PDF在其他设备上显示正常：

var pdfSaveOptions = new PdfSaveOptions();
pdfSaveOptions.EmbedFonts = true;
document.Save(path + pdfFilename, pdfSaveOptions);

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