从 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

扩展Rachel Gallan 的出色发现；以下是我认为可用于在包含循环生成的完整 HTML 页面的字符串上运行转换器的代码：

这是否可以转换创建页面（循环）的进程的输出？ （Javascript 和 CSS 加载了 wp_enqueue.. 调用此代码之前的命令）

    <?php 
    $x = $post_output ;  // $post_output contains an HTML page with doctype/head/body/etc that was generated by the loop
    $dom = new DOMDocument;
    libxml_use_internal_errors(false); // supress errors
    $dom->loadHTML($x, LIBXML_NOERROR); // supress errors
?>
<script type="text/javascript">
         $dom.wordExport();
</script>

...瑞克...

Answer 2

Pandoc 已经下载了图像并使用您发布的命令将它们嵌入到 docx 文件中。

我刚刚实现并提交了一个pull request to parse the figure and figcaption HTML elements properly，它现在已经合并到 master 中（所以它很快就会在 pandoc 2.0 的每晚构建中出现）。使用该代码，您的示例会生成一个 docx 文件，其标题文本具有段落样式“图像标题”。

Answer 3

这可能比您想要的更迂回，但是如果您将文件保存为 pdf（我进入 adobe 并从包含图/figcaption 的 html 文件创建了一个 pdf，但您显然可以通过编程方式执行此操作），并且然后将该pdf文件导出为word，然后您就可以创建一个word文档。也许中间步骤太多了，但它确实有效！

希望这会有所帮助（也许 pdf 可以？？）

编辑 1： 我刚刚找到了 Mark Windsoll 的 jquery plugin，它将 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");

雷切尔

Answer 4

我从未使用过pandoc，我猜它现在不支持许多高级 CSS3 功能。

1.使用 Aspose.Words

我复制了你的 CSS&HTML 代码，制作了一个名为 figure.htm 的 Html 文件，并使用 Aspose.Words 转换了这个 html 文件，效果和你的希望一样。

我使用 C# 编写代码如下：

using Aspose.Words;

        Document doc = new Document();
        DocumentBuilder builder = new DocumentBuilder(doc); 
        using (System.IO.StreamReader sr = new System.IO.StreamReader("./figure.htm"))
        {
            string html = sr.ReadToEnd();
            builder.InsertHtml(html);
        }

        doc.Save("d:\\DocumentBuilder.InsertTableFromHtml Out.doc");

我的Aspose.Words 版本是 16.7.0.0。

2。格式化figcaption标签

还有另一种方法可以继续使用pandoc 使其工作。您可以在使用 pandoc 转换之前处理 Html 文件以修复格式。在你的问题中，基点是 pandoc 不能在许多高级 CSS3 功能上工作，所以如果你能完成这个，那么它也能很好地工作。

我给你一些测试代码，我使用'RegularExpressions'。运行以下代码，figure1.htm 是一个新的 HTML 文件，它将所有 figcaption 的内部 HTML 替换为固定格式的 HTML。

        Regex regex = new Regex("<(?<tag>[a-zA-Z]+?)>(?<html>.+)</\\1>", RegexOptions.Compiled);
        using (System.IO.StreamReader sr = new System.IO.StreamReader("./figure.htm", Encoding.UTF8))
        {
            string html = sr.ReadToEnd();
            int i = 1;

            string newHtml = regex.Replace(html, new MatchEvaluator((m) =>
            {
                string tag = m.Groups["tag"].Value;
                string text = m.Groups["html"].Value;
                if (tag.ToLower() == "figcaption")
                {
                    return $"<{tag}>Fig. {i++} - {text}</{tag}>";
                }
                return m.Value;
            }));

            using (System.IO.StreamWriter sw = new System.IO.StreamWriter("./figure1.htm", false, Encoding.UTF8))
            {
                sw.Write(newHtml);
                sw.Flush();
            }
        }

希望我的回答能帮到你！