Hi,
We are having a styled HTML which when downloaded looks odd. We use html to word conversion api from groupdocs and its failing.Can you please check?
Image of data shown in text editor:
image.png (30.6 KB)
Actual downloaded version image:
image.png (15.9 KB)
It appears that the HTML to Word conversion is not preserving the styling as expected. This issue can arise from various factors, including the complexity of the HTML or specific CSS styles that may not be supported during the conversion process.
To enhance the output, consider using a render-stage approach. Since the source file type is ‘txt’, you should focus on simplifying the HTML content and ensuring that it adheres to supported CSS properties. Unfortunately, advanced options like WebConvertOptions and the UsePdf option are not applicable in this context.
Here’s a basic example of how you might handle the conversion:
using (var converter = new Converter("styled.html"))
{
converter.Convert("converted.docx");
}
Make sure to adjust the file names as necessary. If the styling issues persist, try to simplify the HTML structure or remove unsupported CSS properties to improve compatibility.
For further assistance, please consult the official documentation on converting web formats with GroupDocs.Conversion.
Hello @mayurkhadke ,
Thank you for using our product. At first glance, this appears to be a conversion issue. However, in order for us to investigate it further, we need to understand what code you used when converting HTML to DOCX, as the result may vary depending on the options applied.
Therefore, we kindly ask you to share with us your sample document, the code you used with GroupDocs.Conversion for Java, and the exact product version. This will greatly speed up our investigation process.
Hi
Please find the doc we used for conversion.
<header style="background-color: #f4ebdc; padding: 32px; border-bottom: #E4E4E4 1px solid;">
<div style="max-width: 1450px; margin: 0 auto;">
<h1 style="font-size: 24px; font-weight: 700; line-height: 32px; margin: 0;">Frequently Asked Questions</h1>
<span style="display: block; color: #656565; font-size: 16px; line-height: 24px; margin-top: 4px;"> English Video - Media ID - 1155531 </span>
</div>
</header>
<main style="padding: 22px 16px;">
<section style="max-width: 1450px; margin: 0 auto; padding-top: 24px;">
<h2 style="line-height: 24px; font-size: 16px; font-weight: 600; margin-bottom: 14px;">Personal Experiences</h2>
<div style="display: flex; padding: 16px; border-bottom: #E4E4E4 1px solid;">
<div style="margin-right: 53px;">
<div style="background-color: #C39643; width: 32px; height: 32px; border-radius: 4px; display: flex; justify-content: center; align-items: center;"><img src="https://gatewayqa.on24.com/view/orion/images/icons/faq-icon.svg" alt="FAQ"></div>
</div>
<div>
<h3 style="line-height: 24px; font-size: 16px; font-weight: 600; margin: 0;">How did the speaker's father help her?</h3>
<p style="line-height: 20px; font-size: 14px; margin: 0; padding-top: 16px;">He taught her to find north, which built her confidence to navigate the world.</p>
</div>
</div>
<div style="display: flex; padding: 16px; border-bottom: #E4E4E4 1px solid;">
<div style="margin-right: 53px;">
<div style="background-color: #C39643; width: 32px; height: 32px; border-radius: 4px; display: flex; justify-content: center; align-items: center;"><img src="https://gatewayqa.on24.com/view/orion/images/icons/faq-icon.svg" alt="FAQ"></div>
</div>
<div>
<h3 style="line-height: 24px; font-size: 16px; font-weight: 600; margin: 0;">What changed for the speaker after becoming a parent?</h3>
<p style="line-height: 20px; font-size: 14px; margin: 0; padding-top: 16px;">Her priorities shifted, balancing career and cherishing her child more.</p>
</div>
</div>
</section>
<section style="max-width: 1450px; margin: 0 auto; padding-top: 24px;">
<h2 style="line-height: 24px; font-size: 16px; font-weight: 600; margin-bottom: 14px;">Paid Parental Leave</h2>
<div style="display: flex; padding: 16px; border-bottom: #E4E4E4 1px solid;">
<div style="margin-right: 53px;">
<div style="background-color: #C39643; width: 32px; height: 32px; border-radius: 4px; display: flex; justify-content: center; align-items: center;"><img src="https://gatewayqa.on24.com/view/orion/images/icons/faq-icon.svg" alt="FAQ"></div>
</div>
<div>
<h3 style="line-height: 24px; font-size: 16px; font-weight: 600; margin: 0;">What is the current policy for maternity leave in the US?</h3>
<p style="line-height: 20px; font-size: 14px; margin: 0; padding-top: 16px;">American women get 12 weeks unpaid leave. Men get nothing.</p>
</div>
</div>
<div style="display: flex; padding: 16px; border-bottom: #E4E4E4 1px solid;">
<div style="margin-right: 53px;">
<div style="background-color: #C39643; width: 32px; height: 32px; border-radius: 4px; display: flex; justify-content: center; align-items: center;"><img src="https://gatewayqa.on24.com/view/orion/images/icons/faq-icon.svg" alt="FAQ"></div>
</div>
<div>
<h3 style="line-height: 24px; font-size: 16px; font-weight: 600; margin: 0;">Why is 12 weeks unpaid leave problematic?</h3>
<p style="line-height: 20px; font-size: 14px; margin: 0; padding-top: 16px;">Many families live paycheck to paycheck. They can't afford unpaid leave.</p>
</div>
</div>
<div style="display: flex; padding: 16px; border-bottom: #E4E4E4 1px solid;">
<div style="margin-right: 53px;">
<div style="background-color: #C39643; width: 32px; height: 32px; border-radius: 4px; display: flex; justify-content: center; align-items: center;"><img src="https://gatewayqa.on24.com/view/orion/images/icons/faq-icon.svg" alt="FAQ"></div>
</div>
<div>
<h3 style="line-height: 24px; font-size: 16px; font-weight: 600; margin: 0;">What is the motherhood penalty?</h3>
<p style="line-height: 20px; font-size: 14px; margin: 0; padding-top: 16px;">Women are seen as less dedicated to their jobs and miss promotions.</p>
</div>
</div>
<div style="display: flex; padding: 16px; border-bottom: #E4E4E4 1px solid;">
<div style="margin-right: 53px;">
<div style="background-color: #C39643; width: 32px; height: 32px; border-radius: 4px; display: flex; justify-content: center; align-items: center;"><img src="https://gatewayqa.on24.com/view/orion/images/icons/faq-icon.svg" alt="FAQ"></div>
</div>
<div>
<h3 style="line-height: 24px; font-size: 16px; font-weight: 600; margin: 0;">How does paid parental leave benefit companies?</h3>
<p style="line-height: 20px; font-size: 14px; margin: 0; padding-top: 16px;">It improves retention, reduces absenteeism, cuts training costs, and boosts morale.</p>
</div>
</div>
<div style="display: flex; padding: 16px; border-bottom: #E4E4E4 1px solid;">
<div style="margin-right: 53px;">
<div style="background-color: #C39643; width: 32px; height: 32px; border-radius: 4px; display: flex; justify-content: center; align-items: center;"><img src="https://gatewayqa.on24.com/view/orion/images/icons/faq-icon.svg" alt="FAQ"></div>
</div>
<div>
<h3 style="line-height: 24px; font-size: 16px; font-weight: 600; margin: 0;">What did a study in Sweden show about paternity leave?</h3>
<p style="line-height: 20px; font-size: 14px; margin: 0; padding-top: 16px;">For every month fathers took leave, mothers' income increased by 6.7%.</p>
</div>
</div>
</section>
<section style="max-width: 1450px; margin: 0 auto; padding-top: 24px;">
<h2 style="line-height: 24px; font-size: 16px; font-weight: 600; margin-bottom: 14px;">Gender Roles and Equality</h2>
<div style="display: flex; padding: 16px; border-bottom: #E4E4E4 1px solid;">
<div style="margin-right: 53px;">
<div style="background-color: #C39643; width: 32px; height: 32px; border-radius: 4px; display: flex; justify-content: center; align-items: center;"><img src="https://gatewayqa.on24.com/view/orion/images/icons/faq-icon.svg" alt="FAQ"></div>
</div>
<div>
<h3 style="line-height: 24px; font-size: 16px; font-weight: 600; margin: 0;">How do stereotypes affect men and women?</h3>
<p style="line-height: 20px; font-size: 14px; margin: 0; padding-top: 16px;">Women are overburdened at home. Men are limited in family roles.</p>
</div>
</div>
<div style="display: flex; padding: 16px; border-bottom: #E4E4E4 1px solid;">
<div style="margin-right: 53px;">
<div style="background-color: #C39643; width: 32px; height: 32px; border-radius: 4px; display: flex; justify-content: center; align-items: center;"><img src="https://gatewayqa.on24.com/view/orion/images/icons/faq-icon.svg" alt="FAQ"></div>
</div>
<div>
<h3 style="line-height: 24px; font-size: 16px; font-weight: 600; margin: 0;">Why should we redefine men's roles as caregivers?</h3>
<p style="line-height: 20px; font-size: 14px; margin: 0; padding-top: 16px;">To liberate women and allow men to connect more with family.</p>
</div>
</div>
<div style="display: flex; padding: 16px; border-bottom: #E4E4E4 1px solid;">
<div style="margin-right: 53px;">
<div style="background-color: #C39643; width: 32px; height: 32px; border-radius: 4px; display: flex; justify-content: center; align-items: center;"><img src="https://gatewayqa.on24.com/view/orion/images/icons/faq-icon.svg" alt="FAQ"></div>
</div>
<div>
<h3 style="line-height: 24px; font-size: 16px; font-weight: 600; margin: 0;">What is the call to action for paid parental leave?</h3>
<p style="line-height: 20px; font-size: 14px; margin: 0; padding-top: 16px;">Countries, companies, and institutions should champion paid parental leave.</p>
</div>
</div>
</section>
<section style="max-width: 1450px; margin: 0 auto; padding-top: 24px;">
<h2 style="line-height: 24px; font-size: 16px; font-weight: 600; margin-bottom: 14px;">Global and Local Initiatives</h2>
<div style="display: flex; padding: 16px; border-bottom: #E4E4E4 1px solid;">
<div style="margin-right: 53px;">
<div style="background-color: #C39643; width: 32px; height: 32px; border-radius: 4px; display: flex; justify-content: center; align-items: center;"><img src="https://gatewayqa.on24.com/view/orion/images/icons/faq-icon.svg" alt="FAQ"></div>
</div>
<div>
<h3 style="line-height: 24px; font-size: 16px; font-weight: 600; margin: 0;">Which US states are implementing paid parental leave?</h3>
<p style="line-height: 20px; font-size: 14px; margin: 0; padding-top: 16px;">New York, California, New Jersey, Rhode Island, and Washington.</p>
</div>
</div>
<div style="display: flex; padding: 16px; border-bottom: #E4E4E4 1px solid;">
<div style="margin-right: 53px;">
<div style="background-color: #C39643; width: 32px; height: 32px; border-radius: 4px; display: flex; justify-content: center; align-items: center;"><img src="https://gatewayqa.on24.com/view/orion/images/icons/faq-icon.svg" alt="FAQ"></div>
</div>
<div>
<h3 style="line-height: 24px; font-size: 16px; font-weight: 600; margin: 0;">What did New York City grant to government employees?</h3>
<p style="line-height: 20px; font-size: 14px; margin: 0; padding-top: 16px;">Paid parental leave to over 20,000 employees.</p>
</div>
</div>
<div style="display: flex; padding: 16px; border-bottom: #E4E4E4 1px solid;">
<div style="margin-right: 53px;">
<div style="background-color: #C39643; width: 32px; height: 32px; border-radius: 4px; display: flex; justify-content: center; align-items: center;"><img src="https://gatewayqa.on24.com/view/orion/images/icons/faq-icon.svg" alt="FAQ"></div>
</div>
<div>
<h3 style="line-height: 24px; font-size: 16px; font-weight: 600; margin: 0;">What policy will Danon implement by 2020?</h3>
<p style="line-height: 20px; font-size: 14px; margin: 0; padding-top: 16px;">A global 18 weeks gender-neutral paid parental leave for 100,000 employees.</p>
</div>
</div>
</section>
</main>
We use api way of conversion. API we use https://api.groupdocs.cloud/v2.0/conversion?format=docx
Sample code:
try {
final Resource resource = new FileSystemResource(path.toFile());
body.add("loadOptions", "{\"Format\": \"html\", \"RenderingMode\":\"Flow\"}");
body.add("file", resource);
HttpEntity<MultiValueMap<String, Object>> requestEntity = new HttpEntity<>(body, headers);
String uri = groupdocsConvertUrl;
ResponseEntity<byte[]> response =
restTemplate.exchange(uri, HttpMethod.*PUT* , requestEntity, byte[].class);
return response.getBody();
} catch (Exception e) {
*log*.error(String.*format*("Error converting article id: %s. Response %s", mediaId, e.getMessage()), e);
} finally {
Files.*deleteIfExists*(path);
Files.*deleteIfExists*(createdPath);
}
Hello @mayurkhadke ,
Thank you for sharing this information with us. Since you are using our cloud version of GroupDocs.Conversion, we had to transfer your request to the appropriate forum. Our support team is already handling it and will get back to you as soon as possible.