6.2 KiB
Images
To create a floating
image on top of text:
doc.createImage(fs.readFileSync("./demo/images/pizza.gif"), 200, 200, {
floating: {
horizontalPosition: {
offset: 1014400,
},
verticalPosition: {
offset: 1014400,
},
},
});
By default with no arguments, its an inline
image:
doc.createImage(fs.readFileSync("./demo/images/parrots.bmp"));
You can also create images manually and add them later:
const image = Media.addImage(doc, fs.readFileSync("./demo/images/pizza.gif"));
doc.addImage(image);
Intro
Adding images can be done in two ways:
-
Call the
createImage
method to add the image directly into thedocument
:doc.createImage([IMAGE_BUFFER], [WIDTH], [HEIGHT], [POSITION_OPTIONS]);
-
Create an
image
first, then add it into thedocument
:const image = Media.addImage(doc, [IMAGE_BUFFER]); doc.addImage(image);
docx
supports jpeg
, jpg
, bmp
, gif
and png
Positioning
Positioning is the method on how to place the image on the document
Three types of image positioning is supported:
- Floating
- Wrapped around the text
- Inline
By default, picture are exported as Inline
elements.
Usage
Pass options
into the [POSITION_OPTIONS]
metioned in the Intro above.
Floating
To change the position the image to be on top of the text, simply add the floating
property to the last argument. By default, the offsets are relative to the top left corner of the page
. Offset units are in emus:
const imageData = document.createImage(buffer, 903, 1149, {
floating: {
horizontalPosition: {
offset: 1014400, // relative: HorizontalPositionRelativeFrom.PAGE by default
},
verticalPosition: {
offset: 1014400, // relative: VerticalPositionRelativeFrom.PAGE by default
},
},
});
const imageData = document.createImage(buffer, 903, 1149, {
floating: {
horizontalPosition: {
relative: HorizontalPositionRelativeFrom.RIGHT_MARGIN,
offset: 1014400,
},
verticalPosition: {
relative: VerticalPositionRelativeFrom.BOTTOM_MARGIN,
offset: 1014400,
},
},
});
Options
Full options you can pass into floating
are:
Property | Type | Notes |
---|---|---|
horizontalPosition | HorizontalPositionOptions |
Required |
verticalPosition | VerticalPositionOptions |
Required |
allowOverlap | boolean |
Optional |
lockAnchor | boolean |
Optional |
behindDocument | boolean |
Optional |
layoutInCell | boolean |
Optional |
HorizontalPositionOptions
are:
Property | Type | Notes | Possible Values |
---|---|---|---|
relative | HorizontalPositionRelativeFrom |
Required | CHARACTER , COLUMN , INSIDE_MARGIN , LEFT_MARGIN , MARGIN , OUTSIDE_MARGIN , PAGE , RIGHT_MARGIN |
align | HorizontalPositionAlign |
You can either have align or offset , not both |
CENTER , INSIDE , LEFT , OUTSIDE , RIGHT |
offset | number |
You can either have align or offset , not both |
0 to Infinity |
VerticalPositionOptions
are:
Property | Type | Notes | Possible Values |
---|---|---|---|
relative | VerticalPositionRelativeFrom |
Required | BOTTOM_MARGIN , INSIDE_MARGIN , LINE , MARGIN , OUTSIDE_MARGIN , PAGE , PARAGRAPH , TOP_MARGIN |
align | VerticalPositionAlign |
You can either have align or offset , not both |
BOTTOM , CENTER , INSIDE , OUTSIDE , TOP |
offset | number |
You can either have align or offset , not both |
0 to Infinity |
Wrap text
!> In progress Documentation may potentially be changing
for drawingOptions.textWrapping
we can define various options. textWrapping
has the following properties:
interface TextWrapping {
textWrapStyle: TextWrapStyle;
wrapTextOption?: WrapTextOption;
distanceFromText?: Distance;
}
enum TextWrapStyle {
NONE,
SQUARE,
TIGHT,
TOP_AND_BOTTOM,
}
enum WrapTextOption {
BOTH_SIDES = "bothSides",
LEFT = "left",
RIGHT = "right",
LARGEST = "largest",
}
Examples
Add image to the document
Importing Images from file system path
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
Source: https://github.com/dolanmiu/docx/blob/master/demo/demo9.ts