docx-js/docs/examples.md

Examples

All examples can run independently and can be found in the /demo folder of the project

All the examples below can be ran locally, to do so, run the following command:

npm run demo

This command will run the demo selector app in the /demo folder. It will prompt you to select a demo number, which will run a demo from that folder.

Simple

A simple hello world of the docx library:

Example

Source: https://github.com/dolanmiu/docx/blob/master/demo/demo1.ts

Styles

Styling with JS

This example shows how to customise the look and feel of a document using JS configuration

Example

Source: https://github.com/dolanmiu/docx/blob/master/demo/demo2.ts

Styling with XML

This example shows how to customise the look and feel of a document using XML configuration

Example

Source: https://github.com/dolanmiu/docx/blob/master/demo/demo13.ts

Numbering

This example shows many levels of numbering

Example

Source: https://github.com/dolanmiu/docx/blob/master/demo/demo3.ts

Table

Example of simple table

Example

Source: https://github.com/dolanmiu/docx/blob/master/demo/demo4.ts

Styling table borders

Styling the borders of a table

Example

Source: https://github.com/dolanmiu/docx/blob/master/demo/demo20.ts

Images

Add image to the document

Importing Images from file system path

Example

Source: https://github.com/dolanmiu/docx/blob/master/demo/demo5.ts

Add images to header and footer

Example showing how to add image to headers and footers

Example

Source: https://github.com/dolanmiu/docx/blob/master/demo/demo9.ts

Scaling images

Example showing how to scale images

Example

Source: https://github.com/dolanmiu/docx/blob/master/demo/demo12.ts

Add Image to media before adding to document

This is the best way to add an image to a document because you can add the same image in two locations without increasing document size by re-using the same image

Example

Source: https://github.com/dolanmiu/docx/blob/master/demo/demo23.ts

Add image to table

As before, to add an image to a table, you would need to add it to the Media object first

Example

Source: https://github.com/dolanmiu/docx/blob/master/demo/demo24.ts

Images using Base64 URI

If you want to use a Base64 image instead

Example

Source: https://github.com/dolanmiu/docx/blob/master/demo/demo18.ts

Margins

Example showing how to set custom margains

Example

Source: https://github.com/dolanmiu/docx/blob/master/demo/demo6.ts

Orientation

Example showing how to set the document to landscape or portrait

Example

Source: https://github.com/dolanmiu/docx/blob/master/demo/demo7.ts

Headers & Footers

Example showing how to add headers and footers

Example

Source: https://github.com/dolanmiu/docx/blob/master/demo/demo8.ts

Multiple headers and footers

Check out Sections for this feature

Page Breaks

Normal page breaks

Example showing how to page break

Example

Source: https://github.com/dolanmiu/docx/blob/master/demo/demo14.ts

Page break before

Example showing how to page break before like in Word

Example

Source: https://github.com/dolanmiu/docx/blob/master/demo/demo15.ts

Sections

Example of how sections work. Sections allow multiple headers and footers, and landscape/portrait inside the same document. Also you can have different page number formats and starts for different sections.

Example

Source: https://github.com/dolanmiu/docx/blob/master/demo/demo16.ts

Footnotes

Example of how to add footnotes. Good for references

Example

Source: https://github.com/dolanmiu/docx/blob/master/demo/demo17.ts

Packers

Buffer output

Example showing how to use the Buffer packer and then write that buffer to the file system

Example

Source: https://github.com/dolanmiu/docx/blob/master/demo/demo19.ts

Bookmarks

Example showing how to make bookmarks to make internal hyperlinks within the document

Example

Source: https://github.com/dolanmiu/docx/blob/master/demo/demo21.ts

Bidirectional text

Example showing how to use bidirectional text for certain languages such as Hebrew

Example

Source: https://github.com/dolanmiu/docx/blob/master/demo/demo22.ts

Showcase

My CV

Example showing how to add headers and footers

Example

Source: https://github.com/dolanmiu/docx/blob/master/demo/demo10.ts

Style and Images

This example shows how to customise the look and feel of a document and add images

Example

Source: https://github.com/dolanmiu/docx/blob/master/demo/demo11.ts