如何使用 HtmlConverterSettings 使图像居中答案

【问题标题】：How to center images using HtmlConverterSettings如何使用 HtmlConverterSettings 使图像居中
【发布时间】：2014-05-27 01:05:46
【问题描述】：

我正在使用代码中的 OpenXMLPowerTools HtmlConverterSetting 类来将 Word 文档 (docx) 解析为其可比较的 HTML 等价物。我在生成的 Html 文档中立即注意到的是，一些位于 Word 文档页面中心的图像与 html 输出的左侧对齐。

只关注我试图找到解决方案的代码部分，我有这个：

HtmlConverterSettings settings = new HtmlConverterSettings()
   {
      PageTitle = pageTitle, 
      FabricateCssClasses = true,
      CssClassPrefix = "cls-",
      RestrictToSupportedLanguages = false,
      RestrictToSupportedNumberingFormats = false,
      ImageHandler = imgInfo =>
          {
             XElement img = new XElement(Xhtml.img,
             new XAttribute(NoNamespace.src, imageName),
             imgInfo.ImgStyleAttribute);
             return img;
          }
     };
XElement html = HtmlConverter.ConvertToHtml(wordDoc, settings);

完整执行完整代码后（注意：为简单起见，省略了其他代码部分）....我创建了一个 html 文档，其中包含页面上几乎每个组件标记的 Style 部分。

更具体地说，我获得了图像的内联样式，并且大多数图像都包含宽度和高度属性，但与图像实际位置相关的属性不存在，因为它与原始文档有关。

比如调试XAttribute的ImgStyleAttribute，我发现：

{style="width:1.5in; height:1.4375in;"}

这会在 Html 生成的文件中为我的图像生成以下内联样式：

{img src="<pathToImage>" style="width: 1.5in; height: 1.4375in"}

我还注意到 Html 标记上方的 Style 块动态创建了一些 span 类。我已确定分配给文件中每个图像的那些类中的 1 个。

span.cls-DefaultParagraphFont-000003 {
    font-size:11pt;
    font-weight:normal;
    margin:0in;
    padding:0in;    
}

所以我决定截取该过程，理想情况下是在生成图像的内联样式以添加其他属性以使图像居中（如果不存在定位属性）就在图像的 XElement 是一个合理的选项之前：

var infoimg = imageInfo.ImgStyleAttribute;
imageInfo.ImgStyleAttribute.Value = imageInfo.ImgStyleAttribute.Value + ";margin-left: auto; margin-right: auto; display: block;";

这很好用，但是为了有效地工作，我显然需要在执行之前解析元素的现有样式属性，以避免居中已经具有一些定位属性的图像。所以我不确定这是否是解决问题的正确方法。

我很想听听任何更优雅的方法来解决这个问题，以及其他人如何有效地解决这个问题。

注意：顺便说一句，我使用 C# 和以下库：

iTextSharp、DocumentFormat.OpenXml 和 OpenXMLPowerTools

谢谢

【问题讨论】：

那里有很多要读的东西。您是否在从 Word 转换为 HTML 或从 HTML 转换为 PDF 时遇到问题？我试图在上面找到 iTextSharp 代码，但我没有看到任何代码。
克里斯，我的问题实际上是关于 Word 到 HTML 以及在标记中居中图像。对不起，如果我不清楚。该问题的代码范围是使用后者的 DocumentFormat 和 OpenXML 组件。我只提到了 iTextSharp，因为它包含在项目中而不是在帖子中。谢谢

标签： xml openxml

【解决方案1】：

因此，对于如何使用 DocumentFormat 和 OpenXML 组件使图像居中的问题，我的最终解决方案是使用辅助函数解析 ImageHandler 对象的 ImgStyleAttribute 属性，以确定每个图像是否存在任何现有的 HTML 定位元素。

如果原始标记不包含图像的任何现有内联位置样式元素，那么我会在将内容写入 PDF 格式之前将这些元素附加到图像的中心。我将函数命名为 ContainsStylePositioning，它接受一个字符串值，即 ImgStyleAttributeValue，并将字符串转换为名称/值对数组以搜索样式元素。

如果没有与图像关联的定位相关的内联样式元素，那么我将属性附加到样式元素以自动居中图像。

var infoimg = imageInfo.ImgStyleAttribute;
    if (!ContainStylePositioning(imageInfo.ImgStyleAttribute.Value))
       { imageInfo.ImgStyleAttribute.Value = imageInfo.ImgStyleAttribute.Value + ";margin-left: auto; margin-right: auto; display: block;"; }

XElement img = new XElement(Xhtml.img,
               new XAttribute(NoNamespace.src, imageFileName),
               imageInfo.ImgStyleAttribute,
               imageInfo.AltText != null ? new XAttribute(NoNamespace.alt,imageInfo.AltText) : null);

这在我测试过的所有可能场景中都按预期工作。我一直在寻找其他人的意见，但显然没有其他人对使用这些特定组件有此要求。

谢谢

【讨论】：