Include HTML into a document

[enzogodefroy]

Hello,

I was working on a project with the library and I needed to include HTML from a rich text editor that gave me HTML code. However, we can't just put raw HTML code into a Paragraph to automatically format the code into the docx document.

Is it possible to add a function or a class that takes HTML code as a parameter? Maybe a class that extends the Paragraph class. In fact, there's an example with the .NET library named html2openxml that does what I mean if it's not clear...

I've already done something by myself to format HTML code for the moment, but I'm not very convinced by what I did.

[dolanmiu]

Not possible to add HTML into docx , sorry about this!

How would this work? Would this transpile html into OOXML? I think it could be possible, but would require some work. Something to look into

[enzogodefroy]

Yes I think the library I mentioned is parsing every HTML elements and apply the style on it to correspond as the OOXML structure.

I'm aware that this would require a lot of work but I also think that it could be useful to a certain number of people using docxjs.

[enzogodefroy]

I've already started something but I'm not really convainced. Here is the code I did (Some class are just personnal for styling elements, like Bulleted, Hyperlink, TableCellBody or TableCellHeader). I know it's not a nice code but this is just to show a example :

import { ImageRun, Paragraph, Table, TableRow, TextRun, UnderlineType, WidthType } from "docx"
import * as fs from "fs"
import { decode } from 'html-entities'
import sizeOf from 'image-size'
import { JSDOM } from "jsdom"
import { Bulleted } from "../models/Bulleted.js"
import { Hyperlink } from "../models/Hyperlink.js"
import { TableCellBody } from "../models/TableCellBody.js"
import { TableCellHeader } from "../models/TableCellHeader.js"
import { System_Utils } from "./System_Utils.js"

export class HTMLParser {

    static dom

    static parse(dom, params = {}) {

        HTMLParser.dom = dom

        const content = []

        const bodyChildren = Array.from(dom.window.document.body.children)
        for (const item of bodyChildren) {

            if (item instanceof dom.window.HTMLTableElement) {
                try {
                    const table = this.parseTable(item)
                    content.push(table)
                } catch (error) {
                    throw new Error("Erreur --- Erreur lors de l'analyse HTML (tableau) : " + error.message)
                }
            } else if (item instanceof dom.window.HTMLParagraphElement || item instanceof dom.window.HTMLSpanElement || item.outerHTML.match(/^<img\b[^>]*>/)) {
                try {
                    const paragraph = this.parseParagraph(item, params)
                    content.push(paragraph)
                } catch (error) {
                    throw new Error("Erreur --- Erreur lors de l'analyse HTML (paragraphe) : " + error.message)
                }
            } else if (item instanceof dom.window.HTMLAnchorElement) {
                try {
                    const paragraphs = this.parseLink(item)
                    content.push(paragraphs)
                } catch (error) {
                    throw new Error("Erreur --- Erreur lors de l'analyse HTML (lien) : " + error.message)
                }
            } else if (item instanceof dom.window.HTMLUListElement) {
                try {
                    const paragraphs = this.parseList(item)
                    content.push(...paragraphs)
                } catch (error) {
                    throw new Error("Erreur --- Erreur lors de l'analyse HTML (liste) : " + error.message)
                }
            }
        }

        return content
    }

    static parseParagraph(element, params = {}) {

        const docxTextRuns = []

        const textRuns = [...element.querySelectorAll("span"), ...element.querySelectorAll("p")]

        var previousText = ""
        var previousLink = ""

        function analyzeParagraph(element) {
            const text = (element.textContent !== null ? element.textContent : "").replace(/\s\s+/g, ' ').trim();

            const underline = System_Utils.isUnderline(element)
            const bold = System_Utils.isBold(element) || params?.bold

            const size = (underline && bold) ? 22 : 18
            const color = System_Utils.colorToHex(element.style.getPropertyValue("color"));

            if (text !== "") {

                let linkObject = null
                let imgObjects = []
                let linkText = ""

                if (element.querySelector("a")) {
                    const link = element.querySelector("a");
                    if (link !== null && link.href !== null && link.textContent !== null && link.href !== previousLink) {
                        linkObject = new Hyperlink(link?.textContent, link.href)
                        linkText = link.textContent
                        previousLink = link.href
                    }
                }

                const docxTextRun = new TextRun({
                    text: text.replaceAll(linkText, ""),
                    size,
                    bold,
                    color,
                    underline: underline ? {
                        type: UnderlineType.SINGLE,
                        color: "000000"
                    } : undefined
                });

                if (element.querySelectorAll("img")) {
                    const images = element.querySelectorAll("img")

                    for (let i = 0; i < images.length; i++) {
                        var base64Data = images[i].src.replace(/^data:image\/png;base64,/g, "").replace(/^data:image\/png base64,/g, "")

                        let dir = System_Utils.dirname + "\\..\\..\\temp"

                        if (!fs.existsSync(dir)) {
                            fs.mkdirSync(dir);
                        }

                        let filePath = dir + "\\img_" + i + ".png"
                        fs.writeFileSync(filePath, base64Data, 'base64');

                        const dimensions = sizeOf(filePath)
                        const width = dimensions.width
                        const height = dimensions.height

                        imgObjects.push(new ImageRun({
                            data: fs.readFileSync(filePath),
                            transformation: {
                                width: (width / 1.58),
                                height: (height / 1.58)
                            }
                        }))
                    }
                }

                if (previousText !== text) {
                    docxTextRuns.push(docxTextRun)
                    previousText = text

                    if (previousText.includes(text)) {
                        let index = docxTextRuns.indexOf(docxTextRun) - 1
                        if (docxTextRuns[index] !== undefined
                            && docxTextRuns[index].root[1] !== undefined
                            && docxTextRuns[index].root[1].root[1] !== undefined) {
                            docxTextRuns[index].root[1].root[1] = docxTextRuns[index].root[1].root[1].replaceAll(text, "")
                        }
                    }
                }

                if (linkObject !== null) {
                    docxTextRuns.push(linkObject)
                }

                if (imgObjects.length !== 0) {
                    for (let i = 0; i < imgObjects.length; i++) {
                        docxTextRuns.push(new TextRun({
                            text: ""
                        }))
                        docxTextRuns.push(imgObjects[i])
                    }
                }
            }
        }

        analyzeParagraph(element)

        textRuns.forEach((textRun) => {
            analyzeParagraph(textRun)
        })

        return new Paragraph({
            children: docxTextRuns
        })
    }

    static parseTable(tableElement) {
        let rows = Array.from(tableElement.rows)
        let tRows = []

        for (let row of rows) {
            let tRow = []

            for (let cell of Array.from(row.cells)) {
                let tc = ((rows.indexOf(row) === 0) ? new TableCellHeader() : new TableCellBody())

                if (!cell.innerHTML.trim().match(/<([A-Za-z][A-Za-z0-9]*)\b[^>]*>(.*?)<\/\1>/)) {
                    tRow.push(
                        tc.add(decode(cell.innerHTML.trim().replace(/;/g, ' ').replace(/\s\s+/g, ' ').trim()))
                    )
                } else {
                    let params = {}
                    if (tc instanceof TableCellHeader) {
                        params = { bold: true }
                    }
                    tRow.push(
                        tc.add(this.parse(new JSDOM(cell.innerHTML.trim().replace(/;/g, ' ').replace(/\s\s+/g, ' ').trim())), params)
                    )
                }
            }

            if (tRow.length !== 0) {
                tRows.push(
                    new TableRow({
                        children: tRow,
                        cantSplit: true
                    }),
                )
            }
        }

        return new Table({
            width: {
                size: 100,
                type: WidthType.PERCENTAGE,
            },
            rows: tRows,
        })
    }

    static parseLink(linkElement) {
        return new Paragraph({
            children: [
                new Hyperlink(linkElement.text.replace(/\s\s+/g, ' ').trim(), linkElement.href)
            ],
        })
    }

    static parseList(listElement, listLevel = 0) {

        let p = []

        for (let child of listElement.childNodes) {

            let imgs = child.outerHTML?.match(/<img\b[^>]*>/g)
            if (imgs) {
                for (let img of imgs) {
                    let i = HTMLParser.getImage(img)
                    child = new JSDOM(child.outerHTML.replaceAll(img, "")).window.document.body.children[0]
                }
            }

            console.log(child.outerHTML)
            console.log(('------------------'))

            if (child.textContent !== null && child.textContent.replace(/\s\s+/g, ' ').trim() !== "") {
                p.push(
                    new Bulleted(listLevel, child.textContent.replace(/\s\s+/g, ' ').trim())
                )
            }
        }

        return p
    }

    static getImage(element) {
        element = new JSDOM("<body>" + element + "</body>").window.document.body.children[0]
        if (element.constructor.name === "HTMLImageElement") {

            var base64Data = element.src.replace(/^data:image\/png;base64,/g, "").replace(/^data:image\/png base64,/g, "")

            let dir = System_Utils.dirname + "\\..\\..\\temp"

            if (!fs.existsSync(dir)) {
                fs.mkdirSync(dir);
            }

            let filePath = dir + "\\" + System_Utils.getRandomString(20) + ".png"
            fs.writeFileSync(filePath, base64Data, 'base64');

            const dimensions = sizeOf(filePath)
            const width = dimensions.width
            const height = dimensions.height

            return new ImageRun({
                data: fs.readFileSync(filePath),
                transformation: {
                    width: (width / 1.58),
                    height: (height / 1.58)
                }
            })
        }
        return false
    }
}

[duhmojo]

Poor @dolanmiu having to reply to repeated requests for this over the years (I looked through all the issues for clues) ;)

What about embedding docx XML? I've been fist fighting a similar situation where I'm building a docx where clips of HTML with basic elements are defined need to be mapped into a docx:

All security policies and operational procedures that are identified in Requirement 1 are:<div><ul><li>Documented</li><li>Kept up to date</li><li>In use</li><li>Known to all affected parties</li></ul></div>'

There are a couple of html to docx modules. htmlToDocx will return a full docx (zip compressed and all) and I tried to create a new Document from it, then get the content from it and append to the new document. I'm getting desperate so forgive me if this seems stupidly heavy.

The goal of course is to just convert the document xml, not the styles, meta and packaging.

Is there a way to even insert RAW docx XML section into a docx document? e.g. if I was able to convert to something that could be inserted into a normal document.xml

[duhmojo]

What about altChunk? How can we insert RAW docx XML into a section or paragraph?