docx-ts

- [FIRST VERSION] - Be indulgent and curious!

Convert HTML document to docx format with header and footer.

Installing

npm install docx-ts

Usage

Support Browser environment, including nextjs/vue/react/angular.

Example:

Here's an example of how to use the :

Simple without header or footer :

1import { asBlob } from "html-docx-ts";
2import { saveAs } from "file-saver"; //save the file
3
4const exportDocx = () => {
5  //You can add style to element you want, the body manages it completely.
6  const htmlSource = `
7  <div>
8    <h1> H1 in the docx html </h1>
9    <p> Test docx html </p>
10  </div>
11  `;
12  const options = { orientation: "portrait", margins: {} };
13
14  asBlob({
15    htmlSource: htmlSource,
16    options: options
17  }).then((blob) => {
18    saveAs(blob as Blob, "Name of the docx");
19  })
20
21};

Exemple with header or footer :

1import { asBlob } from "html-docx-ts";
2import { saveAs } from "file-saver"; //save the file
3
4const exportDocx = () => {
5  //You can add style to element you want, the body manages it completely.
6  const htmlSource = `
7  <div>
8    <h1> H1 in the docx html </h1>
9    <p> Test docx html </p>
10  </div>
11  `;
12
13  const options = { orientation: "portrait", margins: {} };
14
15  //For the header and footer, you need to start with a <p> tag. The parser will have an easier time knowing how to parse
16  const  headerSource: {
17    leftSideSource: "<p>LeftSide</p>",
18    centerSource: "<p>CenterSide</p>",
19    rightSideSource: "<p><img src='base64 src' alt='image alt' /></p>",
20  };
21
22  const footerSource: {
23    leftSideSource: "<p>Page</p>",
24    centerSource: "<p>{PAGE_NUM}</p>",
25    rightSideSource: "<p>{PAGE_NUM}/{TOTAL_PAGES}</p>",
26  };
27
28  asBlob({
29    htmlSource: htmlSource,
30    options: options,
31    headerSource : headerSource,
32    footerSource: footerSource,
33  }).then((blob) => {
34    saveAs(blob as Blob, "docName");
35  })
36
37};

How to have page numbering : : The library takes page numbering into account. For simple numbering, you can use {PAGE_NUM}, otherwise you can write {PAGE_NUM}/{TOTAL_PAGES} to get the numbering with the total of pages.

Collaboration

Don't hesitate to collaborate on the project! I created it for my end-of-study internship, and I'm glad the lib can help. So don't hesitate to be curious!

Peace ✌️

License

MIT

Thanks to

html-docx-js html-docx-ts