原来,这才是html+css导出word最佳方式!

转个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-jshtml2docx

问题也很明显,

  • 不支持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样式的。

剩下的工作

请注意:上述代码是基于.net framework写的,运行的机器上还必须有word。

如果要对外提供服务的话,考虑到跨语言跨平台,最好的方式即提供http接口。

而这对一个不熟悉.net的人,那要学习的东西还是不少的。

楼主我就好人做到底,在上述的核心代码上用WCF的webHttpBinding实现了一个的http服务,同时使用log4net实现了日志功能。

最终的程序的workflow是

  • 用户发送html+css内容到http服务
  • 先把html+css存成文件
  • 读取html文件,然后另存为word文件
  • 返回下载链接
  • 使用nginx映射目录中的文件,实现下载功能

所有代码开源在HtmlToWord,如果它对你有用,欢迎点个star.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容