When generating a docx file with html-docx-js, it lacks the capability to incorporate external CSS class styles into the document

Question

When generating a docx file with html-docx-js, it lacks the capability to incorporate external CSS class styles into the document

I have been utilizing the html-docx-js module to convert html content into docx format. However, I am facing an issue where most of my CSS is externally loaded and html-docx-js does not apply any styles.

Here is a simplified code sample:

const html = '<html><head><link rel="stylesheet" type="text/css" href="/styles/page.css"></head><body><div className={bold}>I am bold!</div></body></html>'
saveAs(htmlDocx.asBlob(html), 'bold.docx');

I was advised to try using the juice library, but that solution did not work either.

Does anyone happen to know of a workaround to enable html-docx-js to load external CSS when generating a docx file?

javascript html css reactjs docx

Answer 1

Answer №1

Upon conducting thorough research, I successfully discovered a viable solution to address my issues:

There exists a module known as juice, designed to enable the application of specific CSS inline.

To utilize Juice, it was imperative to have a duplicate copy of the CSS file that needed to be separately loaded.

In addition, due to the limitation of html-docx-js only being able to read the first CSS style definition within an element, I had to make slight adjustments to both the CSS and HTML for compatibility.

The final code snippet showcases the implementation:


import htmlDocx from 'html-docx-js/dist/html-docx';
import saveAs from 'file-saver';
const juice = require('juice');

let getIndex = new Promise((resolve, reject) => {
  this.requests('GET', '/styles/index.css')
    .then(data =>
      data.text().then(css => {
        resolve(css);
      })
    )
    .catch(error => reject(error));
});

getIndex
  .then(css => {
    let html =
      '<!DOCTYPE html><html><head lang="en"><style></style>' +
      '<meta charset="UTF-8"><title>Report</title></head><body>' +
      this.report.innerHTML +
      '</body></html>';

    html = juice.inlineContent(html, css);
    let docx = htmlDocx.asBlob(html);
    saveAs(docx, 'report.docx');
  })
  .catch(error => {
    console.log(error);
  });

Answer 2

Upon conducting thorough research, I successfully discovered a viable solution to address my issues:

There exists a module known as juice, designed to enable the application of specific CSS inline.

To utilize Juice, it was imperative to have a duplicate copy of the CSS file that needed to be separately loaded.

In addition, due to the limitation of html-docx-js only being able to read the first CSS style definition within an element, I had to make slight adjustments to both the CSS and HTML for compatibility.

The final code snippet showcases the implementation:


import htmlDocx from 'html-docx-js/dist/html-docx';
import saveAs from 'file-saver';
const juice = require('juice');

let getIndex = new Promise((resolve, reject) => {
  this.requests('GET', '/styles/index.css')
    .then(data =>
      data.text().then(css => {
        resolve(css);
      })
    )
    .catch(error => reject(error));
});

getIndex
  .then(css => {
    let html =
      '<!DOCTYPE html><html><head lang="en"><style></style>' +
      '<meta charset="UTF-8"><title>Report</title></head><body>' +
      this.report.innerHTML +
      '</body></html>';

    html = juice.inlineContent(html, css);
    let docx = htmlDocx.asBlob(html);
    saveAs(docx, 'report.docx');
  })
  .catch(error => {
    console.log(error);
  });

Answer 3

Answer №2

You have the option to apply a CSS class within the head section, but it is essential to combine both the element tag and the classname.

The setup would resemble something like this:

<head>
...
<style type="text/css">
    div.MyCustomClass {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
</style>
</head>
<body>
...
<div class="MyCustomClass">
...
</div>
</body>

Answer 4

You have the option to apply a CSS class within the head section, but it is essential to combine both the element tag and the classname.

The setup would resemble something like this:

<head>
...
<style type="text/css">
    div.MyCustomClass {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
</style>
</head>
<body>
...
<div class="MyCustomClass">
...
</div>
</body>

When generating a docx file with html-docx-js, it lacks the capability to incorporate external CSS class styles into the document

Answer №1

Answer №2

Similar questions

Is the data set in stone, or is it just the API data that can

Behat automates the process of populating form fields that are dynamically displayed as 'visible'

Integrate Arduino's capabilities with Johnny-Five within an HTML JavaScript document

Deciphering HTML encoding for text fields

Ways to modify the .MuiSelect-nativeInput element within Material-UI

Difficulty with Horizontal Mousewheel Scrolling

In order to determine if components linked from anchor elements are visible on the screen in Next.js, a thorough examination of the components

Encountering difficulties linking to a stylesheet or a script in an HTML file delivered by Express server

Having trouble notifying a json object following an ajax request

Formatting in Cx framework: Configuring right alignment and decimal precision on NumberField

Is there a way to display an image in a React Native app using data from a JSON file?

Set the background-color of each <td> element to be equal to a value in the array, with each group of three elements having the same

ngRepeat does not iterate through an array

What is the best way to display a button only when a different element is in focus?

React's back button is experiencing functionality issues

"Utilizing FabricJs with Multiple Canvases to Display the Same Image Repeatedly

Textarea with integrated checkbox

Issues with JQuery `.click()` event

Creating formGroups dynamically for each object in an array and then updating the values with the object data

What is the process of utilizing multiple npm registries within Yarn?