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 样本太过冗长。

＆＃13;

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. */
}

＆＃13;

<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>

＆＃13;

我在Windows上尝试使用pandoc

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

但没有运气，因为你可以看到＆＃34;图。 1＆＃34;和＆＃34;图2＆＃34;缺少：

我的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并从包含figure / figcaption的html文件创建了一个pdf，但你可以以程序方式明显地做到这一点），以及然后将该pdf文件导出为单词，然后您可以创建一个单词文档。也许中间步骤太多但它确实有效！

希望这有一些帮助（也许pdf可以吗？）

编辑1：我刚刚通过Mark Windsoll找到了jquery plugin，它将HTML转换为Word。我在这里做了codepen to include figure /figcaption。当您按下按钮时，它将打印为Word。（我想你也可以保存它，但他的原始代码笔实际上并没有点击链接，说导出到doc ..叹息..）

 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 ：要将HTML转换为Word 使用C＃，您可以使用Gembox,这是免费的，除非您购买专业版（您可以免费使用它）一段时间来评估它）。

C＃代码是

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

拉结

Answer 2

我从未使用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();
            }
        }

希望我的回答可以帮到你！

Answer 3

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

我刚刚实施并提交了一个pull request to parse the figure and figcaption HTML elements properly，现已合并为主人（所以它将在不久的晚上或之后的pandoc 2.0中进行）。使用该代码，您的示例将生成一个docx文件，其标题文本具有段落样式＆＃34;图像标题＆＃34;。

Answer 4

扩展Rachel Gallan的优秀发现;以下是我认为可能用于在包含Loop生成的完整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>

... ...瑞克

从HTML <figure>和<figcaption>到Microsoft Word

4 个答案: