使用NPOI导出CKEditor内容到MS Word时如何转换HTML标签与行内CSS（未解决）

你遇到的问题本质是NPOI默认不会自动解析HTML字符串为带样式的Word内容，需要先把CKEditor输出的HTML解析为NPOI的XWPF元素，对应映射行内样式即可实现需求。

实现思路 #

• 前端直接提交CKEditor输出的原始HTML字符串即可，不需要额外处理，后端拿到后先做HTML合法性校验，过滤恶意标签避免注入风险。
• 后端用.NET生态常用的HTML解析库HtmlAgilityPack把HTML拆分为文本、span、p等基础元素，同时提取每个元素style属性中的样式规则。
• 把解析出的样式规则映射为NPOI的XWPFRun对应属性，比如font-size映射到FontSize、color映射到字体颜色、font-weight映射到粗体属性等。

核心代码示例（ASP.NET后端） #

首先通过NuGet安装HtmlAgilityPack和NPOI相关依赖包，参考实现代码如下：

using NPOI.XWPF.UserModel;
using HtmlAgilityPack;
using System.Drawing;

// 传入CKEditor输出的HTML字符串和要插入内容的Word段落对象
public void AddHtmlToWordParagraph(string html, XWPFParagraph paragraph)
{
    var htmlDoc = new HtmlDocument();
    htmlDoc.LoadHtml(html);
    // 递归遍历HTML节点，处理样式和内容
    TraverseHtmlNodes(htmlDoc.DocumentNode.ChildNodes, paragraph, null);
}

// 递归遍历方法，支持继承父节点样式
private void TraverseHtmlNodes(HtmlNodeCollection nodes, XWPFParagraph paragraph, Dictionary<string, string> parentStyles)
{
    foreach (var node in nodes)
    {
        var currentStyles = parentStyles != null ? new Dictionary<string, string>(parentStyles) : new Dictionary<string, string>();
        // 提取当前节点的行内样式
        if (node.Attributes["style"] != null)
        {
            var stylePairs = node.Attributes["style"].Value.Split(';', StringSplitOptions.RemoveEmptyEntries);
            foreach (var pair in stylePairs)
            {
                var kv = pair.Split(':', StringSplitOptions.RemoveEmptyEntries);
                if (kv.Length == 2)
                {
                    currentStyles[kv[0].Trim().ToLower()] = kv[1].Trim().ToLower();
                }
            }
        }
        // 处理文本节点
        if (node.NodeType == HtmlNodeType.Text)
        {
            var run = paragraph.CreateRun();
            run.SetText(node.InnerText.Trim());
            // 应用字号样式
            if (currentStyles.ContainsKey("font-size"))
            {
                var sizeStr = currentStyles["font-size"].Replace("px", "");
                if (int.TryParse(sizeStr, out int fontSize))
                {
                    run.FontSize = fontSize;
                }
            }
            // 应用字体颜色样式
            if (currentStyles.ContainsKey("color"))
            {
                var fontColor = ColorTranslator.FromHtml(currentStyles["color"]);
                run.SetColor(fontColor.R, fontColor.G, fontColor.B);
            }
            // 应用粗体样式
            if (currentStyles.ContainsKey("font-weight") && currentStyles["font-weight"] == "bold")
            {
                run.IsBold = true;
            }
            // 应用斜体样式
            if (currentStyles.ContainsKey("font-style") && currentStyles["font-style"] == "italic")
            {
                run.IsItalic = true;
            }
            // 其他样式可按以上逻辑自行扩展，例如下划线、背景高亮、删除线等
            continue;
        }
        // 处理块级p标签，自动换行
        if (node.Name.ToLower() == "p" && paragraph.Runs.Count > 0)
        {
            paragraph.CreateRun().AddBreak();
        }
        // 递归处理子节点
        if (node.HasChildNodes)
        {
            TraverseHtmlNodes(node.ChildNodes, paragraph, currentStyles);
        }
    }
}

扩展说明 #

• 以上代码仅覆盖了常用的文本样式，如果需要支持列表、表格、图片等更复杂的HTML内容，可以在递归逻辑中新增对应节点的处理分支，比如遇到ul/ol就生成Word列表、遇到table就生成XWPFTable、遇到img就插入对应图片到Word中。
• 不需要前端做额外改造，直接调用CKEditor的getData()方法拿到原始HTML传给后端即可。

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