GemBox.Document HTML到PDF垂直文本渲染问题及解决方案

admin 百科 2025-12-14 11

GemBox.Document HTML到PDF垂直文本渲染问题及解决方案-第1张图片-佛山资讯网

本文探讨了在使用GemBox.Document进行HTML到PDF转换时，`writing-mode: vertical-lr` CSS样式未能正确渲染垂直文本的问题。通过分析HTML结构和C#转换代码，我们发现这是一个库版本兼容性问题。解决方案是升级GemBox.Document到指定的最新热修复版本或NuGet包，以确保正确支持该CSS属性，从而实现HTML中垂直文本在PDF输出中的准确呈现。

GemBox.Document HTML到PDF转换中的垂直文本渲染挑战

在使用GemBox.Document库将HTML内容转换为PDF文档时，开发者可能会遇到一些特定的渲染问题，尤其是在处理复杂的CSS样式时。其中一个常见挑战是HTML中定义的垂直文本（例如使用writing-mode: vertical-lr）在PDF输出中未能按预期显示为垂直方向。这通常表现为文本仍然以水平方式呈现，失去了原始HTML布局的视觉效果。

考虑以下HTML结构，其中包含一个表格单元格 (.reprint-td)，旨在通过writing-mode: vertical-lr CSS属性使其内部的“REPRINT”文本垂直显示：

<html>
  <head>
    <style>
      /* ... 其他样式 ... */
      .reprint-td {
        width: 5%;
        writing-mode: vertical-lr; /* 期望垂直显示 */
        text-align: center;
        letter-spacing: 4px;
        font-size: 18px;
        font-weight: bold;
      }
      .reprint-p {
        display: inline-block;
        height: 100%;
      }
      /* ... 其他样式 ... */
    </style>
  </head>
  <body>
    <table class="main-table">
       <tr>
          <td class="reprint-td">
            <p class="reprint-p">REPRINT</p>
          </td>
          <td class="main-td">
            <!-- 主要内容区域 -->
          </td>
          <td class="reprint-td">
             <p class="reprint-p">REPRINT</p>
          </td>
       </tr>
    </table>
  </body>
</html>

登录后复制

在标准浏览器中，这段HTML会正确地将“REPRINT”文本垂直显示。然而，当使用GemBox.Document的C#方法进行转换时，可能会观察到PDF输出中的“REPRINT”文本仍然是水平的，与HTML的预期效果不符。

立即学习“前端免费学习笔记（深入）”；

C# HTML到PDF转换代码示例

典型的GemBox.Document HTML到PDF转换流程如下所示：

using GemBox.Document;
using System.IO;

public class PdfConverter
{
    private readonly string path = "your/output/path/";
    private readonly string htmlFilenameReplaced = "temp_replaced.html";
    private readonly string pdfFilename = "output.pdf";
    private readonly string licenseGemboxDocument = "FREE-LIMITED-KEY"; // 替换为您的GemBox许可证

    // 假设这些变量在实际应用中会被赋值
    private string label1 = "LABEL_ONE";
    private string label2 = "LABEL_TWO";
    private string label3 = "LABEL_THREE";
    private string barcode = "123456789";
    // ... 其他变量

    public PdfConverter()
    {
        // 初始化GemBox组件许可证
        ComponentInfo.SetLicense(licenseGemboxDocument);
    }

    private void ConvertHtmlToPdf(string filenameHtml)
    {
        Console.WriteLine("Operation in progress...");

        // 1. 读取HTML模板并替换占位符
        string templateHtml = File.ReadAllText(filenameHtml);
        string realHtml = ReplaceIntoTemplate(templateHtml);
        File.WriteAllText(path + htmlFilenameReplaced, realHtml);

        // 2. 加载HTML到DocumentModel
        DocumentModel document = DocumentModel.Load(path + htmlFilenameReplaced);

        // 3. 设置文档默认字体 (可选)
        document.DefaultCharacterFormat.FontName = "Verdana";

        // 4. 配置页面设置
        Section section = document.Sections[0];
        PageSetup pageSetup = section.PageSetup;
        pageSetup.PageWidth = 383.62;
        pageSetup.PageHeight = 576.95;
        PageMargins pageMargins = pageSetup.PageMargins;
        pageMargins.Top = pageMargins.Bottom = 96;
        pageMargins.Left = pageMargins.Right = 48;           

        // 5. 保存为PDF
        document.Save(path + pdfFilename);
        Console.WriteLine("Successfully conversion HTML to PDF");
    }

    private string ReplaceIntoTemplate(string templateHtml)
    {
        string newTemplateHtml = templateHtml;
        // 替换HTML中的占位符，例如：
        newTemplateHtml = newTemplateHtml.Replace("__LABEL1__", label1.Replace(" ", " "));
        newTemplateHtml = newTemplateHtml.Replace("__LABEL2__", label2.Replace(" ", " "));
        newTemplateHtml = newTemplateHtml.Replace("__LABEL3__", label3.Replace(" ", " "));
        newTemplateHtml = newTemplateHtml.Replace("BARCODE_NUMBER", barcode.Replace(" ", " "));
        // ... 继续替换其他占位符
        return newTemplateHtml;
    }

    // 假设存在一个showMessage方法用于输出信息
    private void showMessage(string message)
    {
        Console.WriteLine(message);
    }
}

登录后复制

上述ConvertHtmlToPdf方法展示了标准的转换流程：加载HTML、设置页面参数，然后保存为PDF。ReplaceIntoTemplate方法负责动态填充HTML模板中的数据。尽管HTML内容和转换逻辑看似正确，但如果GemBox.Document版本较旧，可能无法完全解析和应用所有现代CSS特性，包括writing-mode。