I am building a non-jQuery port of jQuery-Word-Export, which is to my knowledge the best tool to convert CSS-styled HTML to a file that can be opened, edited, and saved on Microsoft Word (Windows and Mac) (without using a server).
The aim is to provide a solution to anyone who wants such a function on their frontend project: e.g. this project (the Word download button on lower right corner).
There are lots of StackOverflow questions (e.g. this, this and this) on this problem and I spent quite some time before realising jQuery-Word-Export is still the best option.
The motivation of this project is to save time for anyone who comes across the same issue again.
My code is here:
import saveAs from "file-saver"
export function htmlCssExportWord(
html,
styles = "",
filename = "exported-document.doc"
) {
const statiC = {
mhtml: {
top:
"Mime-Version: 1.0\nContent-Base: " +
window.location.href +
'\nContent-Type: Multipart/related; boundary="NEXT.ITEM-BOUNDARY";type="text/html"\n\n--NEXT.ITEM-BOUNDARY\nContent-Type: text/html; charset="utf-8"\nContent-Location: ' +
window.location.href +
"\n\n<!DOCTYPE html>\n<html>\n_html_</html>",
head: '<head>\n<meta http-equiv="Content-Type" content="text/html; charset=utf-8">\n<style>\n_styles_\n</style>\n</head>\n',
body: "<body>_body_</body>",
},
}
// Prepare bottom of mhtml file with image data
const mhtmlBottom = "\n" + "--NEXT.ITEM-BOUNDARY--"
// Aggregate parts of the file together
const fileContent =
statiC.mhtml.top.replace(
"_html_",
statiC.mhtml.head.replace("_styles_", styles) +
statiC.mhtml.body.replace("_body_", html)
) + mhtmlBottom
// Create a Blob with the file contents
const blob = new Blob([fileContent], {
type: "application/msword;charset=utf-8",
})
saveAs(blob, filename)
}
Other supporting code, e.g. React usage, is in this npm package.
I am just beginning my web development journey and essentially doing this on my own, so would appreciate any comments/suggestions on the following areas of improvement:
Add testing frameowrk
On the user's computer's level: at the moment I only rely on anecdotal reports on whether it works on Mac/Windows/Linux. How to make the testing more systematic? By researching parts of MS Word documentation (such as it is) for MS Word for Windows, MS Word for Mac, and MS Word for (say) iOS?
On the browser level: systematically test for browser compatibility, with established tools in that area.
Build an interactive demo where user can input HTML and CSS, and click download to receive the result.
Improve documentation by:
- adding usage examples, e.g. at least plain HTML usage.
- elaborating on other tools available and their strengths and weaknesses (currently "Other Tools" part),
- going deeper in my explanation on how the function works, to increase confidence in people using my code (currently "How it works" part).
Add a video tutorial on YouTube on how to use this tool.
Currently my "npm test" basically runs an install script to install Vite and then opens a port on the user's local machine. Change this as this has led to a security scanner identifying the install script as high alert vulnerability.
Any other suggestions community members can offer.
Grateful for comments on any of the areas of improvement above + any suggestion as to priority of tackling them.
1 more question:
- The logic and a lot of the code above is due to the hard work of user markswindoll, but he is seemingly no longer active on Github/otherwise. Have I given his original ideas sufficient credit in my presentation?
