1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. How do I convert a fully formed HTML string (containing one or more image tags) into a Word Document

How do I convert a fully formed HTML string (containing one or more image tags) into a Word Document

I have looked at numerous related posts in this forum (and downloaded their samples), but none of them have been of any help.

I have a string containing a fully formed HTML document (like the example below) and I have been attempting to convert this into a word document using your DocIO library with no success. All I have been able to do is create a word document without images,


To be clear, the intention is that the images are embedded inside the word document.


<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">

<head></head>

<body>


<div style="background-color:#a94442; color:#FFFFFF; font-size:18px; letter-spacing:3px;">Some More Text Here</div>

<div style="font-size:16px; font-weight:500; border-bottom:1px solid #000000; margin:10px 0 10px 0; letter-spacing:2px;">Some More Text Here</div>



<div style="width:100%">

    <div style="min-height: 300px;">

        <div style="background-color: #f5f3f3; font-weight: bold; font-size: medium; padding: 6px 6px 6px 6px; margin-bottom: 10px;">Some More Text Here</div>

        <div style="width:100%">

            <div style="margin: 10px !important; overflow: hidden;">

                <div>

<p><strong>Some More Text Here</strong></p>

<p>Some More Text Here.</p>

</div>

            </div>

        </div>

    </div>

</div>

<div style="width:100%">

    <div style="min-height: 300px;">

        <div style="background-color: #f5f3f3; font-weight: bold; font-size: medium; padding: 6px 6px 6px 6px; margin-bottom: 10px;">Some More Text Here</div>

        <div style="width:100%">

            <div style="margin: 10px !important; overflow: hidden;">

                <div>

<p>Some More Text Here</p>

<p><img src="{FILE_PATH_HERE}" alt="" width="468" height="376"></p>

<p> </p>

<p>Some More Text Here</p>

<p><img src="{FILE_PATH_HERE}" alt="" width="474" height="376" ></p>

<p> </p>

<p>Some More Text Here.</p>

<p>Some More Text Here</p>

<p><img src="{FILE_PATH_HERE}" alt="" width="476" height="376"></p>

<p> </p>

<p> </p>

<p> </p>

<p> </p>

</div>

            </div>

        </div>

    </div>

</div>

</body>

</html>


1 Reply
LB Lokesh Baskar Syncfusion Team September 29, 2021 06:20 PM UTC

Hi Matthew,

Thank you for contacting Syncfusion support.

From the given details, we have found that your requirement is to convert an HTML string (which contains one or more image tags) into a Word Document. To meet your requirement, we have prepared the sample application. Please refer to the below example at your end to achieve your requirement.
Please find the output Word document generated at our end from the below link:
https://www.syncfusion.com/downloads/support/forum/169229/doc/Sample-1236816514.docx
In the above sample, we have done the following things
1. Create a new instance of a word document.
2. Before appending the Html string, validates the Html string is valid or not.
3. In the ImageNodeVisited event handler, we read the image data by download from the specified URL path when appending the HTML string.
4. Close the Word document

If we misunderstood any of your requirements means, could you please share with us the complete details about your end requirement? Also, kindly share with us the expected output document/screenshot. Thereby, we will check the feasibilities to meet your requirement and will provide you the appropriate solution.

Please refer to the below UG documentation to know how to customize the HTML to Word conversion.|
https://help.syncfusion.com/file-formats/docio/html#customization-settings
https://help.syncfusion.com/file-formats/docio/html#customize-image-data

Please let us know if you have any other questions.

Regards
Lokesh B



Loader.
Up arrow icon