from <figure>と<figcaption>からMicrosoft Word

Question

私はfigure、img、figcaptionというタグを持つHTMLを持っており、それらをMicrosoft Word文書に変換したいと考えています。

imgで参照される画像は、Word文書に挿入し、figcaptionはキャプションに変換する必要があります（Figure番号も保持してください）。

Word 2013でhtmlを開こうとしましたが、figcaptionはFigureキャプションとして変換されませんが、画像の下には単なるテキストです。

これを行うための最小限の作業サンプルがありますか？私はhttps://en.wikipedia.org/wiki/Microsoft_Office_XML_formats#Word_XML_Format_exampleを見ましたが、ちょうどHello worldサンプルをつかむのはあまりにも冗長です。あなたは "図1" と "図2" を見ることができるように私は、Windowsの

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

が、運と上pandocてみました

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>

が欠落しています。

マイpando Cは次のとおりです。

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ファイルを単語にエクスポートすると、単語文書を作成できます。おそらく中間ステップが多すぎますが、うまくいきます！私はWordにHTMLに変換マークWindsollによってjquery pluginを見つけ：これはいくつかの支援である

・ホープ（おそらくPDFは??するだろう）

EDIT 1。私はここに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： HTMLをに変換するには、C＃を使用してください。Gembox,は、プロフェッショナル版を購入しない限り無料です（評価版を無料で使用できます）。

C＃のコードが

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

レイチェル

Answer 2

である私はそれが今を多くの高度なCSS3の機能をサポートしていないと思いpandoc、を使ったことがありません。 Aspose.Wordsでは

を使用

は

1.私はあなたがfigure.htmという名前のHTMLファイルを作成する& HTMLコードをCSS、および変換され、このHTMLファイルにAspose.Wordsを使用して、それはあなたの希望としてうまく機能コピー。

私は以下好きにコードに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ファイルが生成されます。

Answer 4

拡大するには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> 

...リック...