c# - 从 HTML <figure> 和 <figcaption> 到 Microsoft Word

Question

我有一个带有 figure、img 和 figcaption 标签的 HTML，我想将它们转换为 Microsoft Word 文档。

img引用的图片应该插入到Word文档中，figcaption应该转换成它的标题(同时保留图号)。

我曾尝试使用 Word 2013 打开 html，但 figcaption 未转换为图形标题，它只是图像下方的简单文本。

是否有任何最低限度的工作样本来完成它？我看了看 https://en.wikipedia.org/wiki/Microsoft_Office_XML_formats#Word_XML_Format_example但是只获取一个 Hello world 示例太冗长了。

figure .image {
    width: 100%;
}

figure {
    text-align: center;
    display: table;
    max-width: 30%; /* demo; set some amount (px or %) if you can */
    margin: 10px auto; /* not needed unless you want centered */
}
article {
  counter-reset: figures;
}

figure {
  counter-increment: figures;
}

figcaption:before {
  content: "Fig. " counter(figures) " - "; /* For I18n support; use data-counter-string. */
}

<figure>
<p><img class="image" src="https://upload.wikimedia.org/wikipedia/commons/c/ca/Matterhorn002.jpg"></p>
<figcaption>Il monte Cervino.</figcaption>
</figure>

<figure>
<p><img class="image" src="https://upload.wikimedia.org/wikipedia/commons/2/26/Banner_clouds.jpg"></p>
<figcaption>La nuvola che spesso è vicino alla vetta.</figcaption>
</figure>

我尝试在 Windows 上使用 pandoc

pandoc -f html -t docx -o hello.docx hello.html

但运气不好，您可以看到“图 1”和“图 2”丢失了:

我的 pandoc 是:

c:\temp>.\pandoc.exe -v
pandoc.exe 1.19.2.1
Compiled with pandoc-types 1.17.0.4, texmath 0.9, skylighting 0.1.1.4
Default user data directory: C:\Users\ale\AppData\Roaming\pandoc
Copyright (C) 2006-2016 John MacFarlane
Web:  http://pandoc.org
This is free software; see the source for copying conditions.
There is no warranty, not even for merchantability or fitness
for a particular purpose.

编辑 1

也可以使用一些 C# 来完成它。也许我可以通过 C# 程序将 HTML 转换为某种 XML Word 格式。

Answer 1

这可能比你想要的更迂回，但如果你将文件保存为 pdf(我进入 adobe 并从包含图形/无花果标题的 html 文件创建了一个 pdf，但你显然可以通过编程来做到这一点)，并且然后将该pdf文件导出到word，然后你就可以创建一个word文档。也许中间步骤太多了，但它确实有效!

希望这对您有所帮助(也许 pdf 可以？？)

编辑 1: 我刚找到一个 jquery plugin Mark Windsoll 将 HTML 转换为 Word。我做了一个codepen to include figure /figcaption这里。当您按下按钮时，它打印为 Word。 (我想你也可以保存它，但他的原始代码笔实际上并没有在点击说导出到文档的链接时做任何事情......叹气......)

 jQuery(document).ready(function print($)  {   
$(".word-export").click(function(event) {
         $("#page-content").wordExport();
     });
 });

img{width:300px;
height:auto;}
figcaption{width:350px;text-align:center;}
h1{margin-top:10px;}
h1, h2{margin-left:35px;}
p{width:95%;
  padding-top:20px;
  margin:0px auto;}
button{margin: 15px 30px; 
padding:5px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Export-Html-To-Word-Document-With-Images-Using-jQuery-Word-Export-Plugin/FileSaver.js"></script>
<script src="https://www.jqueryscript.net/demo/Export-Html-To-Word-Document-With-Images-Using-jQuery-Word-Export-Plugin/jquery.wordexport.js"></script>

<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet"/>

<h1>jQuery Word Export Plugin Demo</h1>
<div id="page-content">
<h2>Lovely Trees</h2>
<figure>
  <img src="http://www.rachelgallen.com/images/autumntrees.jpg"></figure>
  <figcaption>Autumn Trees</figcaption>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula bibendum lacinia. Pellentesque placerat interdum nisl non semper. Integer ornare, nunc non varius mattis, nulla neque venenatis nibh, vitae cursus risus quam ut nulla. Aliquam erat volutpat. Aliquam erat volutpat. </p>
  <p>And some more text here, but that's quite enough lorem ipsum rubbish!</p>
</div>
<button class="word-export" onclick="print();"> Export as .doc </button>

编辑 2:要使用 C# 将 HTML 转换为 Word，您可以使用 Gembox,这是免费的，除非你购买专业版(你可以免费使用一段时间来评估它)。

C#代码是

// Convert HTML to Word (DOCX) document.
DocumentModel.Load("Document.html").Save("Document.docx");

雷切尔