dolanmiu / docx

Easily generate and modify .docx files with JS/TS with a nice declarative API. Works for Node and on the Browser.

Home Page:https://docx.js.org/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to integrate HTML string into the docx?

jurei733 opened this issue · comments

Want to integrate Html strings in my docx file and don't see how to to do it right now ?

I'm also interested in this, would it be possible to have this feature?

commented

Same question 🙏

Same here!

I am also interested in this

Here is a minimal implementation that works for very simple HTML (WYSIWYG outputs).

import { parseFromString } from "dom-parser";
import {
  Document,
  Footer,
  PageNumber,
  Paragraph,
  TextRun,
} from "docx";
import * as he from "he";

export const htmlStrToParagraph = (str: string): Paragraph[] => {
  const dom = parseFromString(`<body>${str}</body>`)
  
  const sectionChildren = [];

  dom.getElementsByTagName("body")[0].childNodes.forEach((node) => {
    if (["h1", "h2", "h3"].includes(node.nodeName)) {
      sectionChildren.push(
        new Paragraph({
          children: [
            new TextRun({
              text: he.decode(node.textContent),
              bold: true,
            }),
          ],
          spacing: { after: 0 },
        })
      );
    } else if (["p"].includes(node.nodeName)) {
      sectionChildren.push(
        new Paragraph({
          children: [
            new TextRun({
              text: he.decode(node.textContent),
            }),
          ],
          spacing: { after: 0 },
        })
      );
    } else if (node.nodeName === "ul") {
      node.childNodes.forEach((bullet) => {
        if (bullet.nodeName === "li") {
          sectionChildren.push(
            new Paragraph({
              text: he.decode(bullet.textContent),
              bullet: {
                level: 0,
              },
              spacing: {
                before: 0,
                after: 0,
              },
            })
          );
        }
      });
    }

    sectionChildren.push(
      new Paragraph({
        text: "",
        spacing: {
          before: 0,
          after: 0,
        },
      })
    );
  });

  return sectionChildren;
};

You can then run it to construct a document:

const htmlStrToDocx = async (str: string): Promise<Document> => {
  return new Document({
    creator: "Me",
    sections: [
      {
        children: htmlStrToParagraph(str),
        footers: {
          default: new Footer({
            children: [
              new Paragraph({
                alignment: AlignmentType.CENTER,
                children: [
                  new TextRun({
                    children: [PageNumber.CURRENT],
                    color: "000000",
                  }),
                ],
              }),
            ],
          }),
        },
      },
    ],
  });
};