原来，这才是 HTML+CSS 导出 Word 最佳方式！

sp42a

已于 2023-06-04 00:51:17 修改

阅读量1k

点赞数

文章标签： html css word

于 2023-06-04 00:50:43 首次发布

原文链接：https://learnku.com/articles/36507

版权

转个 word 很难吗？

对于任何一个在线富文本写作产品，导出功能是必不可少的，其中导出 word 是其中最常见的选项，但是很多产品导出的 word，比如说 Jira，格式就有不同程度的失真.

仔细分析下来，解决这个思路的主要有两种：

硬转：使用 OpenXml 的 SDK，逐一匹配 html 标签和样式 css，相当于用 OpenXml 实现了一个 html+css 的渲染层。
偷懒：想办法把 html+css 的内容当成 word 的一部分，相当于用 web 视图打开。

当时，我花了一定的时间，在两个方向上分别做了调研。

硬转的思路，直觉上工作量就极大，而且很容易出 Bug，毕竟那么多组合情况需要考虑。值得参考的项目是 html2openxml，1W 多行只能实现 html 的转换，还不包括 css。

不是没想过，限制输出 html 的排版，比如用固定的 id 代表固定的部分，css 样式也只支持特定的几种，但后来讨论下来，觉得这种方法，需要前后端确定好规则，而在当时快速迭代的时期，这无疑会增加开发成本。

而偷懒这条路，能够搜索到项目，都是借用了 word 中 altchunks 的特性，比如:html-docx-js、html2docx。

问题也很明显，

不支持 float 之类的样式，对图片的支持也需要自己写代码转 base64，然后嵌进标签里。这些虽然麻烦些，但是还是可以 tweak。
最麻烦的是，这种格式的 word，兼容性很差，在微信中、mac 上打不开。

于是，我一度卡在这里很久，直到我发现……

原来，word 才是转 word 的最佳工具

转机来的也很突然，就是我发现用 word 打开一个带 html+css 的文件后，再另存成 word，不仅格式得到了保留，图片也在，而且兼容性也还不错！真是

踏破铁鞋无觅处，得来全不费工夫。

问题来了，怎么把这一步程序化呢？这下终于可以用上过去 .net 的开发经验了，C# 是可以通过 com 组件的方式操作 word，但前提是运行程序的机器上必须装 word 才行。

核心代码，也是非常的简单：

首先引用 Microsoft.Office.Interop.Word，调用的代码如下:

var word = new Application {Visible = false};
var doc = word.Documents.Open(htmlFilePath, Format: WdOpenFormat.wdOpenFormatWebPages,
                    ReadOnly: false);
doc.SaveAs2000(wordFilePath, WdSaveFormat.wdFormatDocumentDefault,
                    ReadOnlyRecommended: false);
                doc.Close();
word.quit()

是不是很简单呢？而这里唯一还需要处理的就是图片，如果不做处理，图片还是以链接的方式存储的。一方面，每次打开的时候需要重复下载，好处是 word 文件比较小，但缺点是受限于网速，可能会出现图片加载不出来的情况；另一方面时，如果图片没有指定宽度和高度，当图片的尺寸大于文档的尺寸时，显示的效果就很差。

估化的思路很简单，即强行把图片的尺寸拉伸到一页可以显示下，同时将图片链接转成内嵌的图片。

foreach (InlineShape s in doc.InlineShapes)
{
    var inlineShape = s;

    if (inlineShape.Type != WdInlineShapeType.wdInlineShapePicture &&
        inlineShape.Type != WdInlineShapeType.wdInlineShapeLinkedPicture)
    {
        continue;
    }

    if (inlineShape.Type == WdInlineShapeType.wdInlineShapeLinkedPicture)
    {
        inlineShape.LinkFormat.SavePictureWithDocument = true;
        inlineShape.LinkFormat.BreakLink();
    }

    if (inlineShape.Width > this._documentWidth)
    {
        inlineShape.LockAspectRatio = MsoTriState.msoTrue;
        inlineShape.Width = this._documentWidth;
    }

    if (inlineShape.Height > this._documentHeight)
    {
        inlineShape.LockAspectRatio = MsoTriState.msoTrue;
        inlineShape.Height = this._documentHeight;
    }
}

到此，核心的转换代码就已经完成。（需要提醒各位看官的是，这种方法是不支持 float 和 flex 的 css 样式的。）