220 lines
6.4 KiB
Markdown
220 lines
6.4 KiB
Markdown
# 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:
|
|
|
|
```sh
|
|
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](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo1.ts ':include')
|
|
|
|
_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](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo2.ts ':include')
|
|
|
|
_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](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo13.ts ':include')
|
|
|
|
_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo13.ts_
|
|
|
|
## Numbering
|
|
|
|
This example shows many levels of numbering
|
|
|
|
[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo3.ts ':include')
|
|
|
|
_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo3.ts_
|
|
|
|
## Table
|
|
|
|
Example of simple table
|
|
|
|
[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo4.ts ':include')
|
|
|
|
_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo4.ts_
|
|
|
|
### Styling table borders
|
|
|
|
Styling the borders of a table
|
|
|
|
[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo20.ts ':include')
|
|
|
|
_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo20.ts_
|
|
|
|
## Images
|
|
|
|
### Add image to the document
|
|
|
|
Importing Images from file system path
|
|
|
|
[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo5.ts ':include')
|
|
|
|
_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](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo9.ts ':include')
|
|
|
|
_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo9.ts_
|
|
|
|
### Scaling images
|
|
|
|
Example showing how to scale images
|
|
|
|
[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo12.ts ':include')
|
|
|
|
_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](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo23.ts ':include')
|
|
|
|
_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](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo24.ts ':include')
|
|
|
|
_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](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo18.ts ':include')
|
|
|
|
_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo18.ts_
|
|
|
|
## Margins
|
|
|
|
Example showing how to set custom margins
|
|
|
|
[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo6.ts ':include')
|
|
|
|
_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo6.ts_
|
|
|
|
## Orientation
|
|
|
|
Example showing how to set the document to `landscape` or `portrait`
|
|
|
|
[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo7.ts ':include')
|
|
|
|
_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo7.ts_
|
|
|
|
## Headers & Footers
|
|
|
|
Example showing how to add headers and footers
|
|
|
|
[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo8.ts ':include')
|
|
|
|
_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](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo14.ts ':include')
|
|
|
|
_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](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo15.ts ':include')
|
|
|
|
_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](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo16.ts ':include')
|
|
|
|
_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo16.ts_
|
|
|
|
## Footnotes
|
|
|
|
Example of how to add footnotes. Good for references
|
|
|
|
[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo17.ts ':include')
|
|
|
|
_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](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo19.ts ':include')
|
|
|
|
_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](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo21.ts ':include')
|
|
|
|
_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](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo22.ts ':include')
|
|
|
|
_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo22.ts_
|
|
|
|
## Showcase
|
|
|
|
### My CV
|
|
|
|
Example showing how to add headers and footers
|
|
|
|
[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo10.ts ':include')
|
|
|
|
_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](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo11.ts ':include')
|
|
|
|
_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo11.ts_
|