-
Notifications
You must be signed in to change notification settings - Fork 145
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Images & style doesn't apply well in .docx file #222
Comments
To use CSS you can use https://www.npmjs.com/package/inline-css to inline your styles before you convert to docx. This will keep at least some of your style in your document. It'll also remove the style and link elements |
@Mtillmann if you have any bandwidth, can you write a short example of this? I think it can be helpful to the community |
@nicolasiscoding , sure: import HTMLtoDOCX from 'html-to-docx';
import InlineCss from 'inline-css';
const rawHTMLStringWithStyle = `
<style>
.sans-serif{
font-family: sans-serif;
}
.center{
text-align:center;
}
p{
margin-bottom:1.5rem;
}
</style>
<div class="sans-serif">
<h1 class="center">Text, centered</h1>
<p>A simple paragraph that will receive margin bottom from the element selector</p>
</div>
`;
const inlinedHTML = await InlineCss(rawHTMLStringWithStyle, { url: 'file://' });
const docxWithStyles = await HTMLtoDOCX(inlinedHTML);
//... your code
<html>
<head>
</head>
<body>
<div class="sans-serif" style="font-family: sans-serif;">
<h1 class="center" style="text-align: center;">Text, centered</h1>
<p style="margin-bottom: 1.5rem;">A simple paragraph that will receive margin bottom from the element selector
</p>
</div>
</body>
</html> |
the example assumes node >=18 with top level await and a module environment. It works very similar with other environments |
I tried to do a simple conversion to a docx file and I opened the file with LibreOffice and I see that the
css
doesn´t apply well, it generated like astr
.Also, the image have been generated like a string instead of the image it's self.
The text was updated successfully, but these errors were encountered: