Files
docx-js/docs/usage/images.md
2019-01-09 01:16:47 +00:00

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:

  1. Call the createImage method to add the image directly into the document:

    doc.createImage([IMAGE_BUFFER], [WIDTH], [HEIGHT], [POSITION_OPTIONS]);
    
  2. Create an image first, then add it into the document:

    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

Word Image Positiong

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

Example

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

Example showing how to add image to headers and footers

Example

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