Compare commits

...

7 Commits
4.4.1 ... 4.6.0

Author SHA1 Message Date
da0fa86345 Version bump 2019-01-10 02:37:40 +00:00
78b310e1dd Add Add createFirstPageFooter and createEvenPageFooter 2019-01-10 02:36:42 +00:00
4541d7c977 Text wrapping and borders for images 2019-01-10 02:10:20 +00:00
a37ff90bd7 Version bump 2019-01-09 01:53:12 +00:00
9998ddfcc9 Add createEvenPageHeader method 2019-01-09 01:52:20 +00:00
12ed54c9fd Add floating image support and documentation 2019-01-09 01:16:47 +00:00
3a1a21e498 Version bump 2018-12-10 19:27:51 +00:00
18 changed files with 515 additions and 257 deletions

44
demo/demo38.ts Normal file
View File

@ -0,0 +1,44 @@
// Example of how to add images to the document - You can use Buffers, UInt8Arrays or Base64 strings
// Import from 'docx' rather than '../build' if you install from npm
import * as fs from "fs";
// import { Document, Packer, Paragraph } from "../build";
import { Document, Packer, TextWrappingSide, TextWrappingType } from "../build";
const doc = new Document();
doc.createParagraph(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vehicula nec nulla vitae efficitur. Ut interdum mauris eu ipsum rhoncus, nec pharetra velit placerat. Sed vehicula libero ac urna molestie, id pharetra est pellentesque. Praesent iaculis vehicula fringilla. Duis pretium gravida orci eu vestibulum. Mauris tincidunt ipsum dolor, ut ornare dolor pellentesque id. Integer in nulla gravida, lacinia ante non, commodo ex. Vivamus vulputate nisl id lectus finibus vulputate. Ut et nisl mi. Cras fermentum augue arcu, ac accumsan elit euismod id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ac posuere nisi. Pellentesque tincidunt vehicula bibendum. Phasellus eleifend viverra nisl.",
);
doc.createParagraph(
"Proin ac purus faucibus, porttitor magna ut, cursus nisl. Vivamus ante purus, porta accumsan nibh eget, eleifend dignissim odio. Integer sed dictum est, aliquam lacinia justo. Donec ultrices auctor venenatis. Etiam interdum et elit nec elementum. Pellentesque nec viverra mauris. Etiam suscipit leo nec velit fringilla mattis. Pellentesque justo lacus, sodales eu condimentum in, dapibus finibus lacus. Morbi vitae nibh sit amet sem molestie feugiat. In non porttitor enim.",
);
doc.createParagraph(
"Ut eget diam cursus quam accumsan interdum at id ante. Ut mollis mollis arcu, eu scelerisque dui tempus in. Quisque aliquam, augue quis ornare aliquam, ex purus ultrices mauris, ut porta dolor dolor nec justo. Nunc a tempus odio, eu viverra arcu. Suspendisse vitae nibh nec mi pharetra tempus. Mauris ut ullamcorper sapien, et sagittis sapien. Vestibulum in urna metus. In scelerisque, massa id bibendum tempus, quam orci rutrum turpis, a feugiat nisi ligula id metus. Praesent id dictum purus. Proin interdum ipsum nulla.",
);
doc.createImage(fs.readFileSync("./demo/images/pizza.gif"), 200, 200, {
floating: {
horizontalPosition: {
offset: 2014400,
},
verticalPosition: {
offset: 2014400,
},
wrap: {
type: TextWrappingType.SQUARE,
side: TextWrappingSide.BOTH_SIDES,
},
margins: {
top: 201440,
bottom: 201440,
},
},
});
const packer = new Packer();
packer.toBuffer(doc).then((buffer) => {
fs.writeFileSync("My Document.docx", buffer);
});

View File

@ -1,7 +1,8 @@
// Example of how to add images to the document - You can use Buffers, UInt8Arrays or Base64 strings
// Import from 'docx' rather than '../build' if you install from npm
import * as fs from "fs";
import { Document, Packer, Paragraph } from "../build";
// import { Document, Packer, Paragraph } from "../build";
import { Document, HorizontalPositionAlign, HorizontalPositionRelativeFrom, Packer, Paragraph, VerticalPositionAlign, VerticalPositionRelativeFrom} from "../build";
const doc = new Document();
@ -13,6 +14,29 @@ doc.createImage(fs.readFileSync("./demo/images/dog.png").toString("base64"));
doc.createImage(fs.readFileSync("./demo/images/cat.jpg"));
doc.createImage(fs.readFileSync("./demo/images/parrots.bmp"));
doc.createImage(fs.readFileSync("./demo/images/pizza.gif"));
doc.createImage(fs.readFileSync("./demo/images/pizza.gif"), 200, 200, {
floating: {
horizontalPosition: {
offset: 1014400,
},
verticalPosition: {
offset: 1014400,
},
},
});
doc.createImage(fs.readFileSync("./demo/images/cat.jpg"), 200, 200, {
floating: {
horizontalPosition: {
relative: HorizontalPositionRelativeFrom.PAGE,
align: HorizontalPositionAlign.RIGHT,
},
verticalPosition: {
relative: VerticalPositionRelativeFrom.PAGE,
align: VerticalPositionAlign.BOTTOM,
},
},
});
const packer = new Packer();

View File

@ -1,156 +1,231 @@
# Images
## Intro
To create a `floating` image on top of text:
Adding images is very simple
Simply call the `createImage` method:
```js
const image = doc.createImage([BUFFER_OF_YOUR_IMAGE]);
```
`docx` supports `jpeg`, `jpg`, `bmp`, `gif` and `png`
Check `demo5.js` for an example
## Positioning
Images can be:
* floating position of images
* Wrapped around the text
* Inline
By default, picture are exported as `INLINE` elements.
In Word this is found in:
![Word Image Positiong](https://user-images.githubusercontent.com/34742290/41765548-b0946302-7604-11e8-96f9-166a9f0b8f39.png)
### Usage
The `PictureRun` element support various options to define the positioning of the element in the document.
```js
interface DrawingOptions {
position?: PlacementPosition;
textWrapping?: TextWrapping;
floating?: Floating;
}
```
can be passed when creating `PictureRun()` for example:
```js
const imageData = document.createImage(buffer, 903, 1149);
new docx.PictureRun(imageData, {
position: docx.PlacementPosition.FLOATING,
```ts
doc.createImage(fs.readFileSync("./demo/images/pizza.gif"), 200, 200, {
floating: {
horizontalPosition: {
relative: HorizontalPositionRelativeFrom.PAGE,
align: HorizontalPositionAlign.LEFT,
offset: 1014400,
},
verticalPosition: {
relative: VerticalPositionRelativeFrom.PAGE,
align: VerticalPositionAlign.TOP,
offset: 1014400,
},
},
});
```
So, the first thing is to define the placement position: `INLINE` or `FLOATING`. Inline is the default one so there is no need to pass drawing options for inline.
By default with no arguments, its an `inline` image:
When placement position is FLOATING then we can use two options:
### Wrap text
for `drawingOptions.textWrapping` we can define various options. `textWrapping` has the following properties:
```js
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",
}
```ts
doc.createImage(fs.readFileSync("./demo/images/parrots.bmp"));
```
### Floating position
You can also create images manually and add them later:
When we want to position the image relative or absolute then we need to use option `drawingOptions.floating`:
```js
export interface Floating {
horizontalPosition: HorizontalPositionOptions;
verticalPosition: VerticalPositionOptions;
allowOverlap?: boolean;
lockAnchor?: boolean;
behindDocument?: boolean;
layoutInCell?: boolean;
}
export interface HorizontalPositionOptions {
relative: HorizontalPositionRelativeFrom;
align?: HorizontalPositionAlign;
offset?: number;
}
export interface VerticalPositionOptions {
relative: VerticalPositionRelativeFrom;
align?: VerticalPositionAlign;
offset?: number;
}
export enum HorizontalPositionRelativeFrom {
CHARACTER = "character",
COLUMN = "column",
INSIDE_MARGIN = "insideMargin",
LEFT_MARGIN = "leftMargin",
MARGIN = "margin",
OUTSIDE_MARGIN = "outsideMargin",
PAGE = "page",
RIGHT_MARGIN = "rightMargin",
}
export enum VerticalPositionRelativeFrom {
BOTTOM_MARGIN = "bottomMargin",
INSIDE_MARGIN = "insideMargin",
LINE = "line",
MARGIN = "margin",
OUTSIDE_MARGIN = "outsideMargin",
PAGE = "page",
PARAGRAPH = "paragraph",
TOP_MARGIN = "topMargin",
}
export enum HorizontalPositionAlign {
CENTER = "center",
INSIDE = "inside",
LEFT = "left",
OUTSIDE = "outside",
RIGHT = "right",
}
export enum VerticalPositionAlign {
BOTTOM = "bottom",
CENTER = "center",
INSIDE = "inside",
OUTSIDE = "outside",
TOP = "top",
}
```ts
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`:
```js
doc.createImage([IMAGE_BUFFER], [WIDTH], [HEIGHT], [POSITION_OPTIONS]);
```
2. Create an `image` first, then add it into the `document`:
```ts
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](https://user-images.githubusercontent.com/34742290/41765548-b0946302-7604-11e8-96f9-166a9f0b8f39.png)
Three types of image positioning is supported:
- Floating
- Inline
By default, picture are exported as `Inline` elements.
### Usage
Pass `options` into the `[POSITION_OPTIONS]` metioned in the [Intro above](#Intro).
## 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](https://startbigthinksmall.wordpress.com/2010/01/04/points-inches-and-emus-measuring-units-in-office-open-xml/):
```ts
const imageData = document.createImage(buffer, 903, 1149, {
floating: {
horizontalPosition: {
offset: 1014400, // relative: HorizontalPositionRelativeFrom.PAGE by default
},
verticalPosition: {
offset: 1014400, // relative: VerticalPositionRelativeFrom.PAGE by default
},
},
});
```
```ts
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
Wrapping only works for floating elements. Text will "wrap" around the floating `image`.
Add `wrap` options inside the `floating` options:
```ts
wrap: {
type: [TextWrappingType],
side: [TextWrappingSide],
},
```
For example:
```ts
doc.createImage(fs.readFileSync("./demo/images/pizza.gif"), 200, 200, {
floating: {
horizontalPosition: {
offset: 2014400,
},
verticalPosition: {
offset: 2014400,
},
wrap: {
type: TextWrappingType.SQUARE,
side: TextWrappingSide.BOTH_SIDES,
},
},
});
```
Wrap options have the following properties are:
| Property | Type | Notes | Possible Values |
| -------- | ------------------ | -------- | ------------------------------------------- |
| type | `TextWrappingType` | Optional | `NONE`, `SQUARE`, `TIGHT`, `TOP_AND_BOTTOM` |
| side | `TextWrappingSide` | Optional | `BOTH_SIDES`, `LEFT`, `RIGHT`, `LARGEST` |
## Margins
Margins give some space between the text and the image. Margins [only work for floating elements](http://officeopenxml.com/drwPicInline.php). Additionally, the image must also be in wrap mode (see above).
?> Be sure to also set `wrap` in your options!
To use, add the `margins` options inside the `floating` options:
```ts
margins: {
top: number,
bottom: number,
left: number,
right: number
},
```
For example:
```ts
doc.createImage(fs.readFileSync("./demo/images/pizza.gif"), 200, 200, {
floating: {
horizontalPosition: {
offset: 2014400,
},
verticalPosition: {
offset: 2014400,
},
wrap: {
type: TextWrappingType.SQUARE,
side: TextWrappingSide.BOTH_SIDES,
},
margins: {
top: 201440,
bottom: 201440,
},
},
});
```
## Examples
### 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_
### Floating images
Example showing how to float images on top of text and optimally give a `margin`
[Example](https://raw.githubusercontent.com/dolanmiu/docx/master/demo/demo38.ts ":include")
_Source: https://github.com/dolanmiu/docx/blob/master/demo/demo38.ts_

View File

@ -1,6 +1,6 @@
{
"name": "docx",
"version": "4.4.0",
"version": "4.6.0",
"description": "Generate .docx documents with JavaScript (formerly Office-Clippy)",
"main": "build/index.js",
"scripts": {

View File

@ -3,10 +3,10 @@ import { assert } from "chai";
import { Utility } from "tests/utility";
import { IDrawingOptions } from "../drawing";
import { TextWrapStyle } from "../text-wrap";
import { TextWrappingType } from "../text-wrap";
import { Anchor } from "./anchor";
function createDrawing(drawingOptions: IDrawingOptions): Anchor {
function createAnchor(drawingOptions: IDrawingOptions): Anchor {
return new Anchor(
1,
{
@ -28,14 +28,32 @@ describe("Anchor", () => {
describe("#constructor()", () => {
it("should create a Drawing with correct root key", () => {
anchor = createDrawing({});
anchor = createAnchor({
floating: {
verticalPosition: {
offset: 0,
},
horizontalPosition: {
offset: 0,
},
},
});
const newJson = Utility.jsonify(anchor);
assert.equal(newJson.rootKey, "wp:anchor");
assert.equal(newJson.root.length, 10);
});
it("should create a Drawing with all default options", () => {
anchor = createDrawing({});
anchor = createAnchor({
floating: {
verticalPosition: {
offset: 0,
},
horizontalPosition: {
offset: 0,
},
},
});
const newJson = Utility.jsonify(anchor);
assert.equal(newJson.root.length, 10);
@ -60,7 +78,7 @@ describe("Anchor", () => {
const horizontalPosition = newJson.root[2];
assert.equal(horizontalPosition.rootKey, "wp:positionH");
assert.include(horizontalPosition.root[0].root, {
relativeFrom: "column",
relativeFrom: "page",
});
assert.equal(horizontalPosition.root[1].rootKey, "wp:posOffset");
assert.include(horizontalPosition.root[1].root[0], 0);
@ -69,7 +87,7 @@ describe("Anchor", () => {
const verticalPosition = newJson.root[3];
assert.equal(verticalPosition.rootKey, "wp:positionV");
assert.include(verticalPosition.root[0].root, {
relativeFrom: "paragraph",
relativeFrom: "page",
});
assert.equal(verticalPosition.root[1].rootKey, "wp:posOffset");
assert.include(verticalPosition.root[1].root[0], 0);
@ -104,9 +122,17 @@ describe("Anchor", () => {
});
it("should create a Drawing with square text wrapping", () => {
anchor = createDrawing({
textWrapping: {
textWrapStyle: TextWrapStyle.SQUARE,
anchor = createAnchor({
floating: {
verticalPosition: {
offset: 0,
},
horizontalPosition: {
offset: 0,
},
wrap: {
type: TextWrappingType.SQUARE,
},
},
});
const newJson = Utility.jsonify(anchor);
@ -118,9 +144,17 @@ describe("Anchor", () => {
});
it("should create a Drawing with no text wrapping", () => {
anchor = createDrawing({
textWrapping: {
textWrapStyle: TextWrapStyle.NONE,
anchor = createAnchor({
floating: {
verticalPosition: {
offset: 0,
},
horizontalPosition: {
offset: 0,
},
wrap: {
type: TextWrappingType.NONE,
},
},
});
const newJson = Utility.jsonify(anchor);
@ -131,9 +165,17 @@ describe("Anchor", () => {
});
it("should create a Drawing with tight text wrapping", () => {
anchor = createDrawing({
textWrapping: {
textWrapStyle: TextWrapStyle.TIGHT,
anchor = createAnchor({
floating: {
horizontalPosition: {
offset: 0,
},
verticalPosition: {
offset: 0,
},
wrap: {
type: TextWrappingType.TIGHT,
},
},
});
const newJson = Utility.jsonify(anchor);
@ -144,9 +186,17 @@ describe("Anchor", () => {
});
it("should create a Drawing with tight text wrapping", () => {
anchor = createDrawing({
textWrapping: {
textWrapStyle: TextWrapStyle.TOP_AND_BOTTOM,
anchor = createAnchor({
floating: {
verticalPosition: {
offset: 0,
},
horizontalPosition: {
offset: 0,
},
wrap: {
type: TextWrappingType.TOP_AND_BOTTOM,
},
},
});
const newJson = Utility.jsonify(anchor);

View File

@ -2,16 +2,9 @@
import { IMediaDataDimensions } from "file/media";
import { XmlComponent } from "file/xml-components";
import { IDrawingOptions } from "../drawing";
import {
HorizontalPosition,
HorizontalPositionRelativeFrom,
IFloating,
SimplePos,
VerticalPosition,
VerticalPositionRelativeFrom,
} from "../floating";
import { HorizontalPosition, IFloating, SimplePos, VerticalPosition } from "../floating";
import { Graphic } from "../inline/graphic";
import { TextWrapStyle, WrapNone, WrapSquare, WrapTight, WrapTopAndBottom } from "../text-wrap";
import { TextWrappingType, WrapNone, WrapSquare, WrapTight, WrapTopAndBottom } from "../text-wrap";
import { DocProperties } from "./../doc-properties/doc-properties";
import { EffectExtent } from "./../effect-extent/effect-extent";
import { Extent } from "./../extent/extent";
@ -23,14 +16,8 @@ const defaultOptions: IFloating = {
behindDocument: false,
lockAnchor: false,
layoutInCell: true,
verticalPosition: {
relative: VerticalPositionRelativeFrom.PARAGRAPH,
offset: 0,
},
horizontalPosition: {
relative: HorizontalPositionRelativeFrom.COLUMN,
offset: 0,
},
verticalPosition: {},
horizontalPosition: {},
};
export class Anchor extends XmlComponent {
@ -38,15 +25,22 @@ export class Anchor extends XmlComponent {
super("wp:anchor");
const floating = {
margins: {
top: 0,
bottom: 0,
left: 0,
right: 0,
},
...defaultOptions,
...drawingOptions.floating,
};
this.root.push(
new AnchorAttributes({
distT: 0,
distB: 0,
distL: 0,
distR: 0,
distT: floating.margins.top || 0,
distB: floating.margins.bottom || 0,
distL: floating.margins.left || 0,
distR: floating.margins.right || 0,
simplePos: "0", // note: word doesn't fully support - so we use 0
allowOverlap: floating.allowOverlap === true ? "1" : "0",
behindDoc: floating.behindDocument === true ? "1" : "0",
@ -62,18 +56,18 @@ export class Anchor extends XmlComponent {
this.root.push(new Extent(dimensions.emus.x, dimensions.emus.y));
this.root.push(new EffectExtent());
if (drawingOptions.textWrapping !== undefined) {
switch (drawingOptions.textWrapping.textWrapStyle) {
case TextWrapStyle.SQUARE:
this.root.push(new WrapSquare(drawingOptions.textWrapping));
if (drawingOptions.floating !== undefined && drawingOptions.floating.wrap !== undefined) {
switch (drawingOptions.floating.wrap.type) {
case TextWrappingType.SQUARE:
this.root.push(new WrapSquare(drawingOptions.floating.wrap, drawingOptions.floating.margins));
break;
case TextWrapStyle.TIGHT:
this.root.push(new WrapTight(drawingOptions.textWrapping.distanceFromText));
case TextWrappingType.TIGHT:
this.root.push(new WrapTight(drawingOptions.floating.margins));
break;
case TextWrapStyle.TOP_AND_BOTTOM:
this.root.push(new WrapTopAndBottom(drawingOptions.textWrapping.distanceFromText));
case TextWrappingType.TOP_AND_BOTTOM:
this.root.push(new WrapTopAndBottom(drawingOptions.floating.margins));
break;
case TextWrapStyle.NONE:
case TextWrappingType.NONE:
default:
this.root.push(new WrapNone());
}

View File

@ -2,7 +2,7 @@ import { assert } from "chai";
import { Utility } from "tests/utility";
import { Drawing, IDrawingOptions, PlacementPosition } from "./drawing";
import { Drawing, IDrawingOptions } from "./drawing";
const imageBase64Data = `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`;
@ -47,7 +47,14 @@ describe("Drawing", () => {
it("should create a drawing with anchor element when there options are passed", () => {
currentBreak = createDrawing({
position: PlacementPosition.FLOATING,
floating: {
horizontalPosition: {
offset: 0,
},
verticalPosition: {
offset: 0,
},
},
});
const newJson = Utility.jsonify(currentBreak);
assert.equal(newJson.root[0].rootKey, "wp:anchor");

View File

@ -3,12 +3,6 @@ import { XmlComponent } from "file/xml-components";
import { Anchor } from "./anchor";
import { IFloating } from "./floating";
import { Inline } from "./inline";
import { ITextWrapping } from "./text-wrap";
export enum PlacementPosition {
INLINE,
FLOATING,
}
export interface IDistance {
readonly distT?: number;
@ -18,35 +12,24 @@ export interface IDistance {
}
export interface IDrawingOptions {
readonly position?: PlacementPosition;
readonly textWrapping?: ITextWrapping;
readonly floating?: IFloating;
}
const defaultDrawingOptions: IDrawingOptions = {
position: PlacementPosition.INLINE,
};
export class Drawing extends XmlComponent {
private readonly inline: Inline;
constructor(imageData: IMediaData, drawingOptions?: IDrawingOptions) {
constructor(imageData: IMediaData, drawingOptions: IDrawingOptions = {}) {
super("w:drawing");
if (imageData === undefined) {
throw new Error("imageData cannot be undefined");
}
const mergedOptions = {
...defaultDrawingOptions,
...drawingOptions,
};
if (mergedOptions.position === PlacementPosition.INLINE) {
if (!drawingOptions.floating) {
this.inline = new Inline(imageData.referenceId, imageData.dimensions);
this.root.push(this.inline);
} else if (mergedOptions.position === PlacementPosition.FLOATING) {
this.root.push(new Anchor(imageData.referenceId, imageData.dimensions, mergedOptions));
} else {
this.root.push(new Anchor(imageData.referenceId, imageData.dimensions, drawingOptions));
}
}

View File

@ -1,4 +1,5 @@
// http://officeopenxml.com/drwPicFloating-position.php
import { ITextWrapping } from "../text-wrap";
export enum HorizontalPositionRelativeFrom {
CHARACTER = "character",
@ -39,17 +40,24 @@ export enum VerticalPositionAlign {
}
export interface IHorizontalPositionOptions {
readonly relative: HorizontalPositionRelativeFrom;
readonly relative?: HorizontalPositionRelativeFrom;
readonly align?: HorizontalPositionAlign;
readonly offset?: number;
}
export interface IVerticalPositionOptions {
readonly relative: VerticalPositionRelativeFrom;
readonly relative?: VerticalPositionRelativeFrom;
readonly align?: VerticalPositionAlign;
readonly offset?: number;
}
export interface IMargins {
readonly left?: number;
readonly bottom?: number;
readonly top?: number;
readonly right?: number;
}
export interface IFloating {
readonly horizontalPosition: IHorizontalPositionOptions;
readonly verticalPosition: IVerticalPositionOptions;
@ -57,4 +65,6 @@ export interface IFloating {
readonly lockAnchor?: boolean;
readonly behindDocument?: boolean;
readonly layoutInCell?: boolean;
readonly margins?: IMargins;
readonly wrap?: ITextWrapping;
}

View File

@ -20,7 +20,7 @@ export class HorizontalPosition extends XmlComponent {
this.root.push(
new HorizontalPositionAttributes({
relativeFrom: horizontalPosition.relative,
relativeFrom: horizontalPosition.relative || HorizontalPositionRelativeFrom.PAGE,
}),
);

View File

@ -20,7 +20,7 @@ export class VerticalPosition extends XmlComponent {
this.root.push(
new VerticalPositionAttributes({
relativeFrom: verticalPosition.relative,
relativeFrom: verticalPosition.relative || VerticalPositionRelativeFrom.PAGE,
}),
);

View File

@ -1,8 +1,13 @@
import { XmlAttributeComponent } from "file/xml-components";
import { IDistance } from "../drawing";
// tslint:disable-next-line:no-empty-interface
export interface IInlineAttributes extends IDistance {}
// distT, distB etc have no effect on inline images, only floating
export interface IInlineAttributes extends IDistance {
readonly distT?: number;
readonly distB?: number;
readonly distL?: number;
readonly distR?: number;
}
export class InlineAttributes extends XmlAttributeComponent<IInlineAttributes> {
protected readonly xmlKeys = {

View File

@ -1,14 +1,14 @@
// http://officeopenxml.com/drwPicFloating-textWrap.php
import { IDistance } from "../drawing";
export enum TextWrapStyle {
export enum TextWrappingType {
NONE,
SQUARE,
TIGHT,
TOP_AND_BOTTOM,
}
export enum WrapTextOption {
export enum TextWrappingSide {
BOTH_SIDES = "bothSides",
LEFT = "left",
RIGHT = "right",
@ -16,7 +16,7 @@ export enum WrapTextOption {
}
export interface ITextWrapping {
readonly textWrapStyle: TextWrapStyle;
readonly wrapTextOption?: WrapTextOption;
readonly distanceFromText?: IDistance;
readonly type: TextWrappingType;
readonly side?: TextWrappingSide;
readonly margins?: IDistance;
}

View File

@ -1,10 +1,15 @@
// http://officeopenxml.com/drwPicFloating-textWrap.php
import { XmlAttributeComponent, XmlComponent } from "file/xml-components";
import { ITextWrapping, WrapTextOption } from ".";
import { ITextWrapping, TextWrappingSide } from ".";
import { IDistance } from "../drawing";
import { IMargins } from "../floating";
interface IWrapSquareAttributes extends IDistance {
readonly wrapText?: WrapTextOption;
readonly wrapText?: TextWrappingSide;
readonly distT?: number;
readonly distB?: number;
readonly distL?: number;
readonly distR?: number;
}
class WrapSquareAttributes extends XmlAttributeComponent<IWrapSquareAttributes> {
@ -18,13 +23,24 @@ class WrapSquareAttributes extends XmlAttributeComponent<IWrapSquareAttributes>
}
export class WrapSquare extends XmlComponent {
constructor(textWrapping: ITextWrapping) {
constructor(
textWrapping: ITextWrapping,
margins: IMargins = {
top: 0,
bottom: 0,
left: 0,
right: 0,
},
) {
super("wp:wrapSquare");
this.root.push(
new WrapSquareAttributes({
wrapText: textWrapping.wrapTextOption || WrapTextOption.BOTH_SIDES,
...textWrapping.distanceFromText,
wrapText: textWrapping.side || TextWrappingSide.BOTH_SIDES,
distT: margins.top,
distB: margins.bottom,
distL: margins.left,
distR: margins.right,
}),
);
}

View File

@ -1,6 +1,7 @@
// http://officeopenxml.com/drwPicFloating-textWrap.php
import { XmlAttributeComponent, XmlComponent } from "file/xml-components";
import { IDistance } from "../drawing";
import { IMargins } from "../floating";
interface IWrapTightAttributes {
readonly distT?: number;
@ -16,17 +17,17 @@ class WrapTightAttributes extends XmlAttributeComponent<IWrapTightAttributes> {
export class WrapTight extends XmlComponent {
constructor(
distanceFromText: IDistance = {
distT: 0,
distB: 0,
margins: IMargins = {
top: 0,
bottom: 0,
},
) {
super("wp:wrapTight");
this.root.push(
new WrapTightAttributes({
distT: distanceFromText.distT,
distB: distanceFromText.distB,
distT: margins.top,
distB: margins.bottom,
}),
);
}

View File

@ -1,6 +1,7 @@
// http://officeopenxml.com/drwPicFloating-textWrap.php
import { XmlAttributeComponent, XmlComponent } from "file/xml-components";
import { IDistance } from "../drawing";
import { IMargins } from "../floating";
interface IWrapTopAndBottomAttributes {
readonly distT?: number;
@ -16,17 +17,17 @@ class WrapTopAndBottomAttributes extends XmlAttributeComponent<IWrapTopAndBottom
export class WrapTopAndBottom extends XmlComponent {
constructor(
distanceFromText: IDistance = {
distT: 0,
distB: 0,
margins: IMargins = {
top: 0,
bottom: 0,
},
) {
super("wp:wrapTopAndBottom");
this.root.push(
new WrapTopAndBottomAttributes({
distT: distanceFromText.distT,
distB: distanceFromText.distB,
distT: margins.top,
distB: margins.bottom,
}),
);
}

View File

@ -3,12 +3,14 @@ import { ContentTypes } from "./content-types/content-types";
import { CoreProperties, IPropertiesOptions } from "./core-properties";
import { Document } from "./document";
import {
FooterReference,
FooterReferenceType,
HeaderReference,
HeaderReferenceType,
IHeaderFooterGroup,
SectionPropertiesOptions,
} from "./document/body/section-properties";
import { IDrawingOptions } from "./drawing";
import { IFileProperties } from "./file-properties";
import { FooterWrapper, IDocumentFooter } from "./footer-wrapper";
import { FootNotes } from "./footnotes";
@ -133,8 +135,13 @@ export class File {
return this;
}
public createImage(buffer: Buffer | string | Uint8Array | ArrayBuffer, width?: number, height?: number): Image {
const image = Media.addImage(this, buffer, width, height);
public createImage(
buffer: Buffer | string | Uint8Array | ArrayBuffer,
width?: number,
height?: number,
drawingOptions?: IDrawingOptions,
): Image {
const image = Media.addImage(this, buffer, width, height, drawingOptions);
this.document.addParagraph(image.Paragraph);
return image;
@ -199,6 +206,45 @@ export class File {
return headerWrapper;
}
public createEvenPageHeader(): HeaderWrapper {
const headerWrapper = this.createHeader();
this.document.Body.DefaultSection.addChildElement(
new HeaderReference({
headerType: HeaderReferenceType.EVEN,
headerId: headerWrapper.Header.ReferenceId,
}),
);
return headerWrapper;
}
public createFirstPageFooter(): FooterWrapper {
const footerWrapper = this.createFooter();
this.document.Body.DefaultSection.addChildElement(
new FooterReference({
footerType: FooterReferenceType.FIRST,
footerId: footerWrapper.Footer.ReferenceId,
}),
);
return footerWrapper;
}
public createEvenPageFooter(): FooterWrapper {
const footerWrapper = this.createFooter();
this.document.Body.DefaultSection.addChildElement(
new FooterReference({
footerType: FooterReferenceType.EVEN,
footerId: footerWrapper.Footer.ReferenceId,
}),
);
return footerWrapper;
}
public getFooterByReferenceNumber(refId: number): FooterWrapper {
const entry = this.footers.map((item) => item.footer).find((h) => h.Footer.ReferenceId === refId);
if (entry) {

View File

@ -25,21 +25,23 @@ describe("Numbering", () => {
{ "w:multiLevelType": [{ _attr: { "w:val": "hybridMultilevel" } }] },
]);
abstractNums.filter((el) => el["w:lvl"]).forEach((el, ix) => {
expect(Object.keys(el)).to.have.lengthOf(1);
expect(Object.keys(el["w:lvl"]).sort()).to.deep.equal(["_attr", "w:start", "w:lvlJc", "w:numFmt", "w:pPr", "w:rPr"]);
expect(el["w:lvl"]).to.have.deep.members([
{ _attr: { "w:ilvl": ix, "w15:tentative": 1 } },
{ "w:start": [{ _attr: { "w:val": 1 } }] },
{ "w:lvlJc": [{ _attr: { "w:val": "left" } }] },
{ "w:numFmt": [{ _attr: { "w:val": "bullet" } }] },
]);
// Once chai 4.0.0 lands and #644 is resolved, we can add the following to the test:
// {"w:lvlText": [{"_attr": {"w:val": "•"}}]},
// {"w:rPr": [{"w:rFonts": [{"_attr": {"w:ascii": "Symbol", "w:cs": "Symbol", "w:eastAsia": "Symbol", "w:hAnsi": "Symbol", "w:hint": "default"}}]}]},
// {"w:pPr": [{"_attr": {}},
// {"w:ind": [{"_attr": {"w:left": 720, "w:hanging": 360}}]}]},
});
abstractNums
.filter((el) => el["w:lvl"])
.forEach((el, ix) => {
expect(Object.keys(el)).to.have.lengthOf(1);
expect(Object.keys(el["w:lvl"]).sort()).to.deep.equal(["_attr", "w:start", "w:lvlJc", "w:numFmt", "w:pPr", "w:rPr"]);
expect(el["w:lvl"]).to.have.deep.members([
{ _attr: { "w:ilvl": ix, "w15:tentative": 1 } },
{ "w:start": [{ _attr: { "w:val": 1 } }] },
{ "w:lvlJc": [{ _attr: { "w:val": "left" } }] },
{ "w:numFmt": [{ _attr: { "w:val": "bullet" } }] },
]);
// Once chai 4.0.0 lands and #644 is resolved, we can add the following to the test:
// {"w:lvlText": [{"_attr": {"w:val": "•"}}]},
// {"w:rPr": [{"w:rFonts": [{"_attr": {"w:ascii": "Symbol", "w:cs": "Symbol", "w:eastAsia": "Symbol", "w:hAnsi": "Symbol", "w:hint": "default"}}]}]},
// {"w:pPr": [{"_attr": {}},
// {"w:ind": [{"_attr": {"w:left": 720, "w:hanging": 360}}]}]},
});
});
});