I tried to do a simple conversion to a docx file and I opened the file with LibreOffic

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

To use CSS you can use <a href="https://www.npmjs.com/package/inline-css" rel="nofollo

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Images & style doesn't apply well in .docx file about html-to-docx HOT 4 OPEN

SystemError7 commented on July 1, 2024

Images & style doesn't apply well in .docx file

from html-to-docx.

Comments (4)

Mtillmann commented on July 1, 2024 1

@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

inlinedHTML will contain this html with the styles applied to the nodes:

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

from html-to-docx.

Mtillmann commented on July 1, 2024 1

the example assumes node >=18 with top level await and a module environment. It works very similar with other environments

from html-to-docx.

Mtillmann commented on July 1, 2024

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

from html-to-docx.