html-css-export-word

A function that converts CSS-styled HTML to a "single-page web page", which can be opened, edited, and saved on Microsoft Word for Mac.

Origins

This is a port of jQuery-Export-Word, only with the jQuery-specific syntax removed, and the image-processing functionality removed. The hard work was already done by Mark Swindoll 10 years ago in 2014.

Other tools

My research on other similiar existing tools are in this Stack Overflow answer.

Specially, on the server side, pandoc-server in pandoc is worth considering. But it comes with some extra costs as elaborated in my answer above.

On the choice of .doc over .docx, see this article for this Ruby tool.

Demo

Interactive demo: enter html and css and download the resulting Word file. (Source code)

Example in use: the "Download as Word.doc file" button at the lower right corner.

On your local machine:

npm run test
# Installs and opens the Interactive Demo on your local machine.

Usage

React

import {htmlCssExportWord} from "html-css-export-word"

<div className="hidden">
    <ComponentToPrint ref={sourceRef} id="source-html" />
</div>
<button onClick={() => {
    htmlCssExportWord(
    sourceRef.current.innerHTML, cssFile, 
    "exported-document.doc")}}>
    Download as Word.doc file
</button>

How it works

1. Imports:

• The "file-saver" module is imported to save files generated on the client-side.

2. Function Declaration:

• The function has three parameters:
  • html: HTML content to be exported to Word.
  • styles: Optional CSS styles to be applied to the exported content. Defaults to an empty string.
  • filename: Optional filename for the exported Word document. Defaults to "exported-document.doc".

3. Generating MHTML:

• The function prepares a representation of the content in MHTML format. MHTML is a way to package HTML content along with its resources like images and stylesheets into a single file.
• Specifically, the function defines
  • a template for the top part of the MHTML file, including metadata and the HTML content.
  • a template for the bottom part of the MHTML file.
• The function then aggregates these templates and the actual HTML content into a single string representing the entire MHTML file.

4. Creating Blob:

• The function then creates a Blob (Binary Large Object) containing the MHTML content. A Blob represents raw data and can be of any type.
• The Blob constructor takes two parameters: an array containing the data, and an options object specifying the MIME type: in this case application/msword;charset=utf-8.

5. Saving the File:

• The function uses the imported saveAs function to save the Blob as a file with the specified filename.

Compatibility

• I have yet to consider a systematic way on testing on different devices. Based on anecodtal reports.

• Does not work on:

  • Mobile
  • Linux ubuntu 24.04 + Chrome

• Works on:

  • Windows 11 + Chrome
  • Mac 14.4.1 + Chrome + Firefoox

Limitations

• Microsoft Word cannot correct display many CSS features. In particular, neither flexbox nor grid is supported.
• I have considered adding support by using polyfills (with flexibility for flex and css-grid-polyfill for grid): but have not decided whether to spend the time to do so.

To do

• Dedicated online demo (with iframe for user-created HTML and CSS)
• Detailed tutorial for plain HTML
• Change test script: even though it is innocuous, socket.dev sees the install scripts as a supply chain vulnerability.
• (Possible future modification, inspired by a conversation with Georgios Christou) add an optional 4th argument so that user can download data in different MIME types.

Contact

• Under active development by rubbercapybara until at least 1 June 2024.

• Issues/comments:

  • comment on this Code Review Stack Exchange question
  • open Github issue

• As explained in this post, npm downloads are not an accurate guide to actual usage. If you are a human who actually tried this tool, say hi by opening issue/sending email!