von HTML <figure> und <figcaption> zu Microsoft Word

Question

Ich habe eine HTML mit den figure, img und figcaption-Tags, und ich möchte sie in ein Microsoft Word-Dokument umgewandelt bekommen.

Das Bild, das von img verwiesen wird, sollte in das Word-Dokument eingefügt werden und das figcaption sollte in seine Beschriftung konvertiert werden (wobei auch die Bildnummer beibehalten wird).

Ich habe versucht, die HTML mit Word 2013 zu öffnen, aber die figcaption wird nicht als die Bildunterschrift konvertiert, aber es ist nur ein einfacher Text unter dem Bild.

Gibt es ein Mindestarbeitsmuster, um es zu erledigen? Ich habe einen Blick auf https://en.wikipedia.org/wiki/Microsoft_Office_XML_formats#Word_XML_Format_example, aber es ist zu verbose, nur ein Hallo Welt Probe zu greifen.

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>

Ich habe versucht, mit pandoc auf Windows

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

aber ohne Glück, wie Sie das sehen und "Fig. 2" fehlt "Abb. 1":

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

Edit 1

Es ist in Ordnung, auch einige C# verwenden, um es getan. Vielleicht kann ich den HTML-Code mithilfe eines C# -Programms in ein XML-Word-Format umwandeln.

Answer 1

Dies kann mehr Umweg sein, als Sie möchten, aber wenn Sie die Datei als PDF speichern (ich ging in Adobe und erstellte ein PDF aus einer HTML-Datei mit Figur/figcaption, aber Sie könnten das programmatisch tun), und dann exportieren Sie diese PDF-Datei in Word, dann können Sie ein Word-Dokument erstellen. Vielleicht ein mittlerer Schritt zu viel, aber es funktioniert!

Hope this von etwas Unterstützung (vielleicht ein pdf tun würde ??)

EDIT 1: Ich habe gerade ein jquery plugin von Mark Windsoll der HTML zu Word konvertiert. Ich habe hier eine codepen to include figure /figcaption gemacht. Wenn Sie den Knopf drücken, wird es als Word gedruckt. (Ich nehme an, Sie es entweder retten könnten, aber sein ursprünglichen Code Stift nicht wirklich etwas auf Klick auf den Link tun, die zu doc ​​sagte Export .. seufz ..)

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>

EDIT 2: Um HTML in Word mit C# zu konvertieren, können Sie Gembox, verwenden, die kostenlos ist, es sei denn, Sie kaufen die professionelle Version (Sie könnten es für eine Weile frei verwenden, um es zu bewerten).

Der C# -Code ist

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

Rachel

Answer 2

Ich habe selber nie pandoc, Ich denke, es nicht viele erweiterte CSS3-Funktionen jetzt unterstützen.

1. Mit Aspose.Words

Ich kopierte Sie & HTML-Codes CSS eine HTML-Datei figure.htm und mit Aspose.Words konvertiert diese HTML-Datei, es funktioniert als auch Ihre Hoffnung genannt zu machen.

I C# Code unten mögen:

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"); 

Meine Aspose.Words Version 16.7.0.0.

2. Format figcaption Tag

Es gibt eine andere Art und Weise mit pandoc zu halten, damit es funktioniert. Sie können mit der HTML-Datei umgehen, um das Format zu korrigieren, bevor Sie mit Pandora konvertieren. In Ihrer Frage ist der Ausgangspunkt, dass pandoc nicht auf vielen fortgeschrittenen CSS3-Funktionen funktioniert. Wenn Sie das also fertigstellen können, funktioniert es auch gut.

Ich gebe einige Test-Code für Sie, und ich benutze 'RegularExpressions'. Führen Sie unter Code, figure1.htm ist eine neue HTML-Datei und es ersetzt alle figcaption inter HTML zu einem festen Format 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(); 
      } 
     } 

Wunsch meine Antwort Ihnen helfen können!

Answer 3

Pandoc lädt die Bilder bereits herunter und bettet sie mit dem von Ihnen geposteten Befehl in die docx-Datei ein.

Ich habe gerade eine pull request to parse the figure and figcaption HTML elements properly implementiert und eingereicht, die in Master jetzt zusammengeführt wurde (so wird es in den nächtlichen Builds kurz oder später in Pandoc 2.0 sein). Mit diesem Code wird in Ihrem Beispiel eine docx-Datei mit dem Beschriftungstext mit Absatzstil "Bildbeschriftung" erstellt.

Answer 4

Zu erweitern auf Rachel Gallan ist ausgezeichnete finden; Der folgende Code wird möglicherweise verwendet, um den Konverter für eine Zeichenfolge auszuführen, die eine vollständige HTML-Seite enthält:

Würde dies funktionieren, um die Ausgabe eines Prozesses zu konvertieren, der eine Seite erstellt (die Schleife)? (Javascript und CSS mit wp_enqueue geladen .. Befehle vorherigen Code zu nennen)

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

... Rick ...