smartyellow/docx-js
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make adding images declarative and simple

Browse Source
This commit is contained in:
Dolan
2021-03-18 02:48:37 +00:00
parent c8db70b3b7
commit caf188caae
25 changed files with 1585 additions and 550 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
demo/11-declaritive-styles-2.ts
View File

@ -7,7 +7,7 @@ import {
Document, Document,
Footer, Footer,
HeadingLevel, HeadingLevel,
Media, ImageRun,
Packer, Packer,
Paragraph, Paragraph,
Table, Table,
@ -126,15 +126,6 @@ const doc = new Document({
}, },
}); });
const image = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 100,
height: 100,
},
});
const table = new Table({ const table = new Table({
rows: [ rows: [
new TableRow({ new TableRow({
@ -168,23 +159,6 @@ const table = new Table({
], ],
}); });
const image1 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 100,
height: 100,
},
});
const image2 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 100,
height: 100,
},
});
doc.addSection({ doc.addSection({
properties: { properties: {
top: 700, top: 700,
@ -204,7 +178,15 @@ doc.addSection({
}), }),
}, },
children: [ children: [
new Paragraph(image), new Paragraph(
new ImageRun({
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 100,
height: 100,
},
}),
),
new Paragraph({ new Paragraph({
text: "HEADING", text: "HEADING",
heading: HeadingLevel.HEADING_1, heading: HeadingLevel.HEADING_1,
@ -243,12 +225,28 @@ doc.addSection({
style: "normalPara", style: "normalPara",
}), }),
table, table,
new Paragraph(image1), new Paragraph(
new ImageRun({
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 100,
height: 100,
},
}),
),
new Paragraph({ new Paragraph({
text: "Test", text: "Test",
style: "normalPara2", style: "normalPara2",
}), }),
new Paragraph(image2), new Paragraph(
new ImageRun({
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 100,
height: 100,
},
}),
),
new Paragraph({ new Paragraph({
text: "Test 2", text: "Test 2",
style: "normalPara2", style: "normalPara2",

83
demo/12-scaling-images.ts
View File

@ -1,45 +1,58 @@
// Scaling images // Scaling images
// Import from 'docx' rather than '../build' if you install from npm // Import from 'docx' rather than '../build' if you install from npm
import * as fs from "fs"; import * as fs from "fs";
import { Document, Media, Packer, Paragraph } from "../build"; import { Document, ImageRun, Packer, Paragraph } from "../build";
const doc = new Document(); const doc = new Document();
const image = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 50,
height: 50,
},
});
const image2 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 100,
height: 100,
},
});
const image3 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 250,
height: 250,
},
});
const image4 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 400,
height: 400,
},
});
doc.addSection({ doc.addSection({
children: [new Paragraph("Hello World"), new Paragraph(image), new Paragraph(image2), new Paragraph(image3), new Paragraph(image4)], children: [
new Paragraph("Hello World"),
new Paragraph({
children: [
new ImageRun({
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 50,
height: 50,
},
}),
],
}),
new Paragraph({
children: [
new ImageRun({
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 100,
height: 100,
},
}),
],
}),
new Paragraph({
children: [
new ImageRun({
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 250,
height: 250,
},
}),
],
}),
new Paragraph({
children: [
new ImageRun({
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 400,
height: 400,
},
}),
],
}),
],
}); });
Packer.toBuffer(doc).then((buffer) => { Packer.toBuffer(doc).then((buffer) => {

21
demo/18-image-from-buffer.ts
View File

@ -1,25 +1,24 @@
// Insert image from a buffer // Insert image from a buffer
// Import from 'docx' rather than '../build' if you install from npm // Import from 'docx' rather than '../build' if you install from npm
import * as fs from "fs"; import * as fs from "fs";
import { Document, Media, Packer, Paragraph } from "../build"; import { Document, ImageRun, Packer, Paragraph } from "../build";
const doc = new Document(); const doc = new Document();
const imageBase64Data = `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`; const imageBase64Data = `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`;
const image = Media.addImage({
document: doc,
data: Buffer.from(imageBase64Data, "base64"),
transformation: {
width: 100,
height: 100,
},
});
doc.addSection({ doc.addSection({
children: [ children: [
new Paragraph({ new Paragraph({
children: [image], children: [
new ImageRun({
data: Buffer.from(imageBase64Data, "base64"),
transformation: {
width: 100,
height: 100,
},
}),
],
}), }),
], ],
}); });

122
demo/23-base64-images.ts
View File

@ -1,71 +1,81 @@
// This demo adds an image to the Media cache, and then insert to the document afterwards // This demo adds an image to the Media cache, and then insert to the document afterwards
// Import from 'docx' rather than '../build' if you install from npm // Import from 'docx' rather than '../build' if you install from npm
import * as fs from "fs"; import * as fs from "fs";
import { Document, Media, Packer, Paragraph, TextRun } from "../build"; import { Document, ImageRun, Packer, Paragraph, TextRun } from "../build";
const doc = new Document(); const doc = new Document();
const image = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/image1.jpeg"),
transformation: {
width: 100,
height: 100,
},
});
const image2 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/dog.png"),
transformation: {
width: 100,
height: 100,
},
});
const image3 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/cat.jpg"),
transformation: {
width: 100,
height: 100,
},
});
const image4 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/parrots.bmp"),
transformation: {
width: 100,
height: 100,
},
});
const image5 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 100,
height: 100,
},
});
const imageBase64Data = `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`; const imageBase64Data = `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`;
const image6 = Media.addImage({
document: doc,
data: Buffer.from(imageBase64Data, "base64"),
transformation: {
width: 100,
height: 100,
},
});
doc.addSection({ doc.addSection({
children: [ children: [
new Paragraph({ new Paragraph({
children: [new TextRun("Hello World"), image5], children: [
new TextRun("Hello World"),
new ImageRun({
data: fs.readFileSync("./demo/images/parrots.bmp"),
transformation: {
width: 100,
height: 100,
},
}),
],
}),
new Paragraph({
children: [
new ImageRun({
data: fs.readFileSync("./demo/images/image1.jpeg"),
transformation: {
width: 100,
height: 100,
},
}),
],
}),
new Paragraph({
children: [
new ImageRun({
data: fs.readFileSync("./demo/images/dog.png"),
transformation: {
width: 100,
height: 100,
},
}),
],
}),
new Paragraph({
children: [
new ImageRun({
data: fs.readFileSync("./demo/images/cat.jpg"),
transformation: {
width: 100,
height: 100,
},
}),
],
}),
new Paragraph({
children: [
new ImageRun({
data: fs.readFileSync("./demo/images/parrots.bmp"),
transformation: {
width: 100,
height: 100,
},
}),
],
}),
new Paragraph({
children: [
new ImageRun({
data: Buffer.from(imageBase64Data, "base64"),
transformation: {
width: 100,
height: 100,
},
}),
],
}), }),
new Paragraph(image),
new Paragraph(image2),
new Paragraph(image3),
new Paragraph(image4),
new Paragraph(image6),
], ],
}); });

25
demo/24-images-to-table-cell.ts
View File

@ -1,19 +1,10 @@
// Add image to table cell // Add image to table cell
// Import from 'docx' rather than '../build' if you install from npm // Import from 'docx' rather than '../build' if you install from npm
import * as fs from "fs"; import * as fs from "fs";
import { Document, Media, Packer, Paragraph, Table, TableCell, TableRow } from "../build"; import { Document, ImageRun, Packer, Paragraph, Table, TableCell, TableRow } from "../build";
const doc = new Document(); const doc = new Document();
const image = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/image1.jpeg"),
transformation: {
width: 100,
height: 100,
},
});
const table = new Table({ const table = new Table({
rows: [ rows: [
new TableRow({ new TableRow({
@ -38,7 +29,19 @@ const table = new Table({
children: [], children: [],
}), }),
new TableCell({ new TableCell({
children: [new Paragraph(image)], children: [
new Paragraph({
children: [
new ImageRun({
data: fs.readFileSync("./demo/images/image1.jpeg"),
transformation: {
width: 100,
height: 100,
},
}),
],
}),
],
}), }),
new TableCell({ new TableCell({
children: [], children: [],

19
demo/35-hyperlinks.ts
View File

@ -1,7 +1,7 @@
// Example on how to add hyperlinks to websites // Example on how to add hyperlinks to websites
// Import from 'docx' rather than '../build' if you install from npm // Import from 'docx' rather than '../build' if you install from npm
import * as fs from "fs"; import * as fs from "fs";
import { Document, ExternalHyperlink, Footer, FootnoteReferenceRun, Media, Packer, Paragraph, TextRun } from "../build"; import { Document, ExternalHyperlink, Footer, FootnoteReferenceRun, ImageRun, Packer, Paragraph, TextRun } from "../build";
const doc = new Document({ const doc = new Document({
footnotes: { footnotes: {
@ -24,15 +24,6 @@ const doc = new Document({
}, },
}); });
const image1 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/image1.jpeg"),
transformation: {
width: 100,
height: 100,
},
});
doc.addSection({ doc.addSection({
footers: { footers: {
default: new Footer({ default: new Footer({
@ -86,7 +77,13 @@ doc.addSection({
new Paragraph({ new Paragraph({
children: [ children: [
new ExternalHyperlink({ new ExternalHyperlink({
child: image1, child: new ImageRun({
data: fs.readFileSync("./demo/images/image1.jpeg"),
transformation: {
width: 100,
height: 100,
},
}),
link: "http://www.google.com", link: "http://www.google.com",
}), }),
new ExternalHyperlink({ new ExternalHyperlink({

24
demo/36-image-to-table-cell.ts
View File

@ -1,17 +1,9 @@
// Add image to table cell in a header and body // Add image to table cell in a header and body
// Import from 'docx' rather than '../build' if you install from npm // Import from 'docx' rather than '../build' if you install from npm
import * as fs from "fs"; import * as fs from "fs";
import { Document, Header, Media, Packer, Paragraph, Table, TableCell, TableRow } from "../build"; import { Document, Header, ImageRun, Packer, Paragraph, Table, TableCell, TableRow } from "../build";
const doc = new Document(); const doc = new Document();
const image = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/image1.jpeg"),
transformation: {
width: 100,
height: 100,
},
});
const table = new Table({ const table = new Table({
rows: [ rows: [
@ -37,7 +29,19 @@ const table = new Table({
children: [], children: [],
}), }),
new TableCell({ new TableCell({
children: [new Paragraph(image)], children: [
new Paragraph({
children: [
new ImageRun({
data: fs.readFileSync("./demo/images/image1.jpeg"),
transformation: {
width: 100,
height: 100,
},
}),
],
}),
],
}), }),
], ],
}), }),

62
demo/37-images-to-header-and-footer.ts
View File

@ -1,38 +1,48 @@
// Add images to header and footer // Add images to header and footer
// Import from 'docx' rather than '../build' if you install from npm // Import from 'docx' rather than '../build' if you install from npm
import * as fs from "fs"; import * as fs from "fs";
import { Document, Header, Media, Packer, Paragraph } from "../build"; import { Document, Header, ImageRun, Packer, Paragraph } from "../build";
const doc = new Document(); const doc = new Document();
const image = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/image1.jpeg"),
transformation: {
width: 100,
height: 100,
},
});
const image1 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 100,
height: 100,
},
});
const image2 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/image1.jpeg"),
transformation: {
width: 100,
height: 100,
},
});
doc.addSection({ doc.addSection({
headers: { headers: {
default: new Header({ default: new Header({
children: [new Paragraph(image), new Paragraph(image1), new Paragraph(image2)], children: [
new Paragraph({
children: [
new ImageRun({
data: fs.readFileSync("./demo/images/image1.jpeg"),
transformation: {
width: 100,
height: 100,
},
}),
],
}),
new Paragraph({
children: [
new ImageRun({
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 100,
height: 100,
},
}),
],
}),
new Paragraph({
children: [
new ImageRun({
data: fs.readFileSync("./demo/images/image1.jpeg"),
transformation: {
width: 100,
height: 100,
},
}),
],
}),
],
}), }),
}, },
children: [new Paragraph("Hello World")], children: [new Paragraph("Hello World")],

53
demo/38-text-wrapping.ts
View File

@ -2,35 +2,10 @@
// Import from 'docx' rather than '../build' if you install from npm // Import from 'docx' rather than '../build' if you install from npm
import * as fs from "fs"; import * as fs from "fs";
// import { Document, Packer, Paragraph } from "../build"; // import { Document, Packer, Paragraph } from "../build";
import { Document, Media, Packer, Paragraph, TextWrappingSide, TextWrappingType } from "../build"; import { Document, ImageRun, Packer, Paragraph, TextWrappingSide, TextWrappingType } from "../build";
const doc = new Document(); const doc = new Document();
const image = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 200,
height: 200,
},
floating: {
horizontalPosition: {
offset: 2014400,
},
verticalPosition: {
offset: 2014400,
},
wrap: {
type: TextWrappingType.SQUARE,
side: TextWrappingSide.BOTH_SIDES,
},
margins: {
top: 201440,
bottom: 201440,
},
},
});
doc.addSection({ doc.addSection({
children: [ children: [
new Paragraph( new Paragraph(
@ -42,7 +17,31 @@ doc.addSection({
new Paragraph( new Paragraph(
"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.", "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.",
), ),
new Paragraph(image), new Paragraph(
new ImageRun({
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 200,
height: 200,
},
floating: {
horizontalPosition: {
offset: 2014400,
},
verticalPosition: {
offset: 2014400,
},
wrap: {
type: TextWrappingType.SQUARE,
side: TextWrappingSide.BOTH_SIDES,
},
margins: {
top: 201440,
bottom: 201440,
},
},
}),
),
], ],
}); });

209
demo/5-images.ts
View File

@ -1,12 +1,11 @@
// Example of how to add images to the document - You can use Buffers, UInt8Arrays or Base64 strings // 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 from 'docx' rather than '../build' if you install from npm
import * as fs from "fs"; import * as fs from "fs";
// import { Document, Packer, Paragraph } from "../build";
import { import {
Document, Document,
HorizontalPositionAlign, HorizontalPositionAlign,
HorizontalPositionRelativeFrom, HorizontalPositionRelativeFrom,
Media, ImageRun,
Packer, Packer,
Paragraph, Paragraph,
VerticalPositionAlign, VerticalPositionAlign,
@ -15,106 +14,118 @@ import {
const doc = new Document(); const doc = new Document();
const image1 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/image1.jpeg"),
transformation: {
width: 100,
height: 100,
},
});
const image2 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/dog.png").toString("base64"),
transformation: {
width: 100,
height: 100,
},
});
const image3 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/cat.jpg"),
transformation: {
width: 100,
height: 100,
flip: {
vertical: true,
},
},
});
const image4 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/parrots.bmp"),
transformation: {
width: 150,
height: 150,
flip: {
horizontal: true,
},
rotation: 225,
},
});
const image5 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 200,
height: 200,
flip: {
horizontal: true,
vertical: true,
},
},
});
const image6 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 200,
height: 200,
rotation: 45,
},
floating: {
zIndex: 10,
horizontalPosition: {
offset: 1014400,
},
verticalPosition: {
offset: 1014400,
},
},
});
const image7 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/cat.jpg"),
transformation: {
width: 200,
height: 200,
},
floating: {
zIndex: 5,
horizontalPosition: {
relative: HorizontalPositionRelativeFrom.PAGE,
align: HorizontalPositionAlign.RIGHT,
},
verticalPosition: {
relative: VerticalPositionRelativeFrom.PAGE,
align: VerticalPositionAlign.BOTTOM,
},
},
});
doc.addSection({ doc.addSection({
children: [ children: [
new Paragraph("Hello World"), new Paragraph("Hello World"),
new Paragraph(image1), new Paragraph({
new Paragraph(image2), children: [
new Paragraph(image3), new ImageRun({
new Paragraph(image4), data: fs.readFileSync("./demo/images/image1.jpeg"),
new Paragraph(image5), transformation: {
new Paragraph(image6), width: 100,
new Paragraph(image7), height: 100,
},
}),
],
}),
new Paragraph({
children: [
new ImageRun({
data: fs.readFileSync("./demo/images/dog.png").toString("base64"),
transformation: {
width: 100,
height: 100,
},
}),
],
}),
new Paragraph({
children: [
new ImageRun({
data: fs.readFileSync("./demo/images/cat.jpg"),
transformation: {
width: 100,
height: 100,
flip: {
vertical: true,
},
},
}),
],
}),
new Paragraph({
children: [
new ImageRun({
data: fs.readFileSync("./demo/images/parrots.bmp"),
transformation: {
width: 150,
height: 150,
flip: {
horizontal: true,
},
rotation: 225,
},
}),
],
}),
new Paragraph({
children: [
new ImageRun({
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 200,
height: 200,
flip: {
horizontal: true,
vertical: true,
},
},
}),
],
}),
new Paragraph({
children: [
new ImageRun({
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 200,
height: 200,
rotation: 45,
},
floating: {
zIndex: 10,
horizontalPosition: {
offset: 1014400,
},
verticalPosition: {
offset: 1014400,
},
},
}),
],
}),
new Paragraph({
children: [
new ImageRun({
data: fs.readFileSync("./demo/images/cat.jpg"),
transformation: {
width: 200,
height: 200,
},
floating: {
zIndex: 5,
horizontalPosition: {
relative: HorizontalPositionRelativeFrom.PAGE,
align: HorizontalPositionAlign.RIGHT,
},
verticalPosition: {
relative: VerticalPositionRelativeFrom.PAGE,
align: VerticalPositionAlign.BOTTOM,
},
},
}),
],
}),
], ],
}); });

61
demo/50-readme-demo.ts
View File

@ -1,33 +1,28 @@
// Simple example to add text to a document // The demo on the README.md
// Import from 'docx' rather than '../build' if you install from npm // Import from 'docx' rather than '../build' if you install from npm
import * as fs from "fs"; import * as fs from "fs";
import { Document, HeadingLevel, Media, Packer, Paragraph, Table, TableCell, TableRow, VerticalAlign } from "../build"; import { Document, HeadingLevel, ImageRun, Packer, Paragraph, Table, TableCell, TableRow, VerticalAlign } from "../build";
const doc = new Document(); const doc = new Document();
const image1 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/image1.jpeg"),
transformation: {
width: 100,
height: 100,
},
});
const image2 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 100,
height: 100,
},
});
const table = new Table({ const table = new Table({
rows: [ rows: [
new TableRow({ new TableRow({
children: [ children: [
new TableCell({ new TableCell({
children: [new Paragraph(image1)], children: [
new Paragraph({
children: [
new ImageRun({
data: fs.readFileSync("./demo/images/image1.jpeg"),
transformation: {
width: 100,
height: 100,
},
}),
],
}),
],
verticalAlign: VerticalAlign.CENTER, verticalAlign: VerticalAlign.CENTER,
}), }),
new TableCell({ new TableCell({
@ -52,7 +47,19 @@ const table = new Table({
], ],
}), }),
new TableCell({ new TableCell({
children: [new Paragraph(image1)], children: [
new Paragraph({
children: [
new ImageRun({
data: fs.readFileSync("./demo/images/image1.jpeg"),
transformation: {
width: 100,
height: 100,
},
}),
],
}),
],
}), }),
], ],
}), }),
@ -66,7 +73,17 @@ doc.addSection({
heading: HeadingLevel.HEADING_1, heading: HeadingLevel.HEADING_1,
}), }),
table, table,
new Paragraph(image2), new Paragraph({
children: [
new ImageRun({
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 100,
height: 100,
},
}),
],
}),
], ],
}); });

39
demo/9-images-in-header-and-footer.ts
View File

@ -1,33 +1,24 @@
// Add images to header and footer // Add images to header and footer
// Import from 'docx' rather than '../build' if you install from npm // Import from 'docx' rather than '../build' if you install from npm
import * as fs from "fs"; import * as fs from "fs";
import { Document, Footer, Header, Media, Packer, Paragraph } from "../build"; import { Document, Footer, Header, ImageRun, Packer, Paragraph } from "../build";
const doc = new Document(); const doc = new Document();
const image1 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 100,
height: 100,
},
});
const image2 = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 100,
height: 100,
},
});
doc.addSection({ doc.addSection({
headers: { headers: {
default: new Header({ default: new Header({
children: [ children: [
new Paragraph({ new Paragraph({
children: [image1], children: [
new ImageRun({
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 100,
height: 100,
},
}),
],
}), }),
], ],
}), }),
@ -36,7 +27,15 @@ doc.addSection({
default: new Footer({ default: new Footer({
children: [ children: [
new Paragraph({ new Paragraph({
children: [image2], children: [
new ImageRun({
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 100,
height: 100,
},
}),
],
}), }),
], ],
}), }),

55
docs/usage/images.md
View File

@ -5,8 +5,7 @@
To create a `floating` image on top of text: To create a `floating` image on top of text:
```ts ```ts
const image = Media.addImage({ const image = new ImageRun({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"), data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: { transformation: {
width: 200, width: 200,
@ -26,8 +25,7 @@ const image = Media.addImage({
By default with no arguments, its an `inline` image: By default with no arguments, its an `inline` image:
```ts ```ts
const image = Media.addImage({ const image = new ImageRun({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"), data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: { transformation: {
width: 100, width: 100,
@ -58,30 +56,21 @@ doc.addSection({
## Intro ## Intro
Adding images can be done in two ways: Adding images can be easily done by creating an instance of `ImageRun`. This can be added in a `Paragraph` or `Hyperlink`:
1. Call the `createImage` method to add the image directly into the `document`: ```ts
const image = new ImageRun({
data: [IMAGE_BUFFER],
transformation: {
width: [IMAGE_SIZE],
height: [IMAGE_SIZE],
},
});
```ts doc.addSection({
Media.addImage({}); children: [new Paragraph(image)],
``` });
```
2. Create an `image` first, then add it into the `document`:
```ts
const image = Media.addImage({
document: doc,
data: [IMAGE_BUFFER],
transformation: {
width: [IMAGE_SIZE],
height: [IMAGE_SIZE],
},
});
doc.addSection({
children: [new Paragraph(image)],
});
```
`docx` supports `jpeg`, `jpg`, `bmp`, `gif` and `png` `docx` supports `jpeg`, `jpg`, `bmp`, `gif` and `png`
@ -96,7 +85,7 @@ Three types of image positioning is supported:
- Floating - Floating
- Inline - Inline
By default, picture are exported as `Inline` elements. By default, images are exported as `Inline` elements.
### Usage ### Usage
@ -107,8 +96,7 @@ Pass `options` into the `[POSITION_OPTIONS]` metioned in the [Intro above](#Intr
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/): 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 ```ts
const image = Media.addImage({ const image = new ImageRun({
document: doc,
data: buffer, data: buffer,
transformation: { transformation: {
width: 903, width: 903,
@ -126,8 +114,7 @@ const image = Media.addImage({
``` ```
```ts ```ts
const image = Media.addImage({ const image = new ImageRun({
document: doc,
data: buffer, data: buffer,
transformation: { transformation: {
width: 903, width: 903,
@ -192,8 +179,7 @@ wrap: {
For example: For example:
```ts ```ts
Media.addImage({ const image = new ImageRun({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"), data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: { transformation: {
width: 200, width: 200,
@ -241,8 +227,7 @@ margins: {
For example: For example:
```ts ```ts
Media.addImage({ const image = new ImageRun({
document: doc,
data: fs.readFileSync("./demo/images/pizza.gif"), data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: { transformation: {
width: 200, width: 200,

2
docs/usage/paragraph.md
View File

@ -72,7 +72,7 @@ This is the list of options for a paragraph. A detailed explanation is below:
| indent | `IIndentAttributesProperties` | Optional | | | indent | `IIndentAttributesProperties` | Optional | |
| keepLines | `boolean` | Optional | | | keepLines | `boolean` | Optional | |
| keepNext | `boolean` | Optional | | | keepNext | `boolean` | Optional | |
| children | `(TextRun or PictureRun or Hyperlink)[]` | Optional | | | children | `(TextRun or ImageRun or Hyperlink)[]` | Optional | |
| style | `string` | Optional | | | style | `string` | Optional | |
| [tabStop](usage/tab-stops) | `{ left?: ITabStopOptions; right?: ITabStopOptions; maxRight?: { leader: LeaderType; }; center?: ITabStopOptions }` | Optional | | | [tabStop](usage/tab-stops) | `{ left?: ITabStopOptions; right?: ITabStopOptions; maxRight?: { leader: LeaderType; }; center?: ITabStopOptions }` | Optional | |
| [bullet](usage/bullet-points) | `{ level: number }` | Optional | | | [bullet](usage/bullet-points) | `{ level: number }` | Optional | |

2
src/file/drawing/drawing.spec.ts
View File

@ -7,12 +7,10 @@ import { Drawing, IDrawingOptions } from "./drawing";
const imageBase64Data = `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`; const imageBase64Data = `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`;
function createDrawing(drawingOptions?: IDrawingOptions): Drawing { function createDrawing(drawingOptions?: IDrawingOptions): Drawing {
const path = "./demo/images/image1.jpeg";
return new Drawing( return new Drawing(
{ {
fileName: "test.jpg", fileName: "test.jpg",
stream: Buffer.from(imageBase64Data, "base64"), stream: Buffer.from(imageBase64Data, "base64"),
path: path,
transformation: { transformation: {
pixels: { pixels: {
x: 100, x: 100,

8
src/file/footer-wrapper.spec.ts
View File

@ -47,4 +47,12 @@ describe("FooterWrapper", () => {
expect(spy.called).to.equal(true); expect(spy.called).to.equal(true);
}); });
}); });
describe("#Media", () => {
it("should get Media", () => {
const media = new Media();
const file = new FooterWrapper(media, 1);
expect(file.Media).to.equal(media);
});
});
}); });

8
src/file/header-wrapper.spec.ts
View File

@ -47,4 +47,12 @@ describe("HeaderWrapper", () => {
expect(spy.called).to.equal(true); expect(spy.called).to.equal(true);
}); });
}); });
describe("#Media", () => {
it("should get Media", () => {
const media = new Media();
const file = new HeaderWrapper(media, 1);
expect(file.Media).to.equal(media);
});
});
}); });

1
src/file/media/data.ts
View File

@ -16,7 +16,6 @@ export interface IMediaDataTransformation {
export interface IMediaData { export interface IMediaData {
readonly stream: Buffer | Uint8Array | ArrayBuffer; readonly stream: Buffer | Uint8Array | ArrayBuffer;
readonly path?: string;
readonly fileName: string; readonly fileName: string;
readonly transformation: IMediaDataTransformation; readonly transformation: IMediaDataTransformation;
} }

101
src/file/media/media.spec.ts
View File

@ -3,10 +3,7 @@ import { expect } from "chai";
import { SinonStub, stub } from "sinon"; import { SinonStub, stub } from "sinon";
import * as convenienceFunctions from "convenience-functions"; import * as convenienceFunctions from "convenience-functions";
import { Formatter } from "export/formatter";
import { File } from "../file";
import { Paragraph } from "../paragraph";
import { Media } from "./media"; import { Media } from "./media";
describe("Media", () => { describe("Media", () => {
@ -18,69 +15,6 @@ describe("Media", () => {
(convenienceFunctions.uniqueId as SinonStub).restore(); (convenienceFunctions.uniqueId as SinonStub).restore();
}); });
describe("#addImage", () => {
it("should add image", () => {
const file = new File();
const image = Media.addImage({
document: file,
data: "",
transformation: {
width: 100,
height: 100,
},
});
let tree = new Formatter().format(new Paragraph(image));
expect(tree["w:p"]).to.be.an.instanceof(Array);
tree = new Formatter().format(image);
expect(tree["w:r"]).to.be.an.instanceof(Array);
});
it("should ensure the correct relationship id is used when adding image", () => {
// tslint:disable-next-line:no-any
const file = new File();
const image1 = Media.addImage({
document: file,
data: "test",
transformation: {
width: 100,
height: 100,
},
});
const tree = new Formatter().format(new Paragraph(image1));
const inlineElements = tree["w:p"][0]["w:r"][0]["w:drawing"][0]["wp:inline"];
const graphicData = inlineElements.find((x) => x["a:graphic"]);
expect(graphicData["a:graphic"][1]["a:graphicData"][1]["pic:pic"][2]["pic:blipFill"][0]["a:blip"]).to.deep.equal({
_attr: {
"r:embed": `rId{test.png}`,
cstate: "none",
},
});
const image2 = Media.addImage({
document: file,
data: "test",
transformation: {
width: 100,
height: 100,
},
});
const tree2 = new Formatter().format(new Paragraph(image2));
const inlineElements2 = tree2["w:p"][0]["w:r"][0]["w:drawing"][0]["wp:inline"];
const graphicData2 = inlineElements2.find((x) => x["a:graphic"]);
expect(graphicData2["a:graphic"][1]["a:graphicData"][1]["pic:pic"][2]["pic:blipFill"][0]["a:blip"]).to.deep.equal({
_attr: {
"r:embed": `rId{test.png}`,
cstate: "none",
},
});
});
});
describe("#addMedia", () => { describe("#addMedia", () => {
it("should add media", () => { it("should add media", () => {
const image = new Media().addMedia("", { const image = new Media().addMedia("", {
@ -129,35 +63,30 @@ describe("Media", () => {
}); });
}); });
describe("#getMedia", () => { describe("#addImage", () => {
it("should get media", () => { it("should add media", () => {
const media = new Media(); const media = new Media();
media.addMedia("", { media.addMedia("", {
width: 100, width: 100,
height: 100, height: 100,
}); });
const image = media.getMedia("test.png"); media.addImage("test2.png", {
stream: Buffer.from(""),
expect(image.fileName).to.equal("test.png"); fileName: "",
expect(image.transformation).to.deep.equal({ transformation: {
pixels: { pixels: {
x: 100, x: Math.round(1),
y: 100, y: Math.round(1),
},
emus: {
x: Math.round(1 * 9525),
y: Math.round(1 * 9525),
},
}, },
flip: undefined,
emus: {
x: 952500,
y: 952500,
},
rotation: undefined,
}); });
});
it("Get media", () => { expect(media.Array).to.be.lengthOf(2);
const media = new Media();
expect(() => media.getMedia("test.png")).to.throw();
}); });
}); });

50
src/file/media/media.ts
View File

@ -1,12 +1,9 @@
import { uniqueId } from "convenience-functions"; import { uniqueId } from "convenience-functions";
import { IFloating } from "../drawing";
import { File } from "../file";
import { PictureRun } from "../paragraph";
import { IMediaData } from "./data"; import { IMediaData } from "./data";
// import { Image } from "./image"; // import { Image } from "./image";
interface IMediaTransformation { export interface IMediaTransformation {
readonly width: number; readonly width: number;
readonly height: number; readonly height: number;
readonly flip?: { readonly flip?: {
@ -17,48 +14,19 @@ interface IMediaTransformation {
} }
export class Media { export class Media {
public static addImage(options: {
readonly document: File;
readonly data: Buffer | string | Uint8Array | ArrayBuffer;
readonly transformation: IMediaTransformation;
readonly floating?: IFloating;
}): PictureRun {
// Workaround to expose id without exposing to API
const mediaData = options.document.Media.addMedia(options.data, options.transformation);
return new PictureRun(mediaData, { floating: options.floating });
}
private readonly map: Map<string, IMediaData>; private readonly map: Map<string, IMediaData>;
constructor() { constructor() {
this.map = new Map<string, IMediaData>(); this.map = new Map<string, IMediaData>();
} }
public getMedia(key: string): IMediaData { public addMedia(data: Buffer | string | Uint8Array | ArrayBuffer, transformation: IMediaTransformation): IMediaData {
const data = this.map.get(key); const key = `${uniqueId()}.png`;
if (data === undefined) {
throw new Error(`Cannot find image with the key ${key}`);
}
return data;
}
public addMedia(buffer: Buffer | string | Uint8Array | ArrayBuffer, transformation: IMediaTransformation): IMediaData {
return this.createMedia(`${uniqueId()}.png`, transformation, buffer);
}
private createMedia(
key: string,
transformation: IMediaTransformation,
data: Buffer | string | Uint8Array | ArrayBuffer,
filePath?: string,
): IMediaData {
const newData = typeof data === "string" ? this.convertDataURIToBinary(data) : data; const newData = typeof data === "string" ? this.convertDataURIToBinary(data) : data;
const imageData: IMediaData = { const imageData: IMediaData = {
stream: newData, stream: newData,
path: filePath,
fileName: key, fileName: key,
transformation: { transformation: {
pixels: { pixels: {
@ -79,14 +47,12 @@ export class Media {
return imageData; return imageData;
} }
public addImage(key: string, mediaData: IMediaData): void {
this.map.set(key, mediaData);
}
public get Array(): readonly IMediaData[] { public get Array(): readonly IMediaData[] {
const array = new Array<IMediaData>(); return Array.from(this.map.values());
this.map.forEach((data) => {
array.push(data);
});
return array;
} }
private convertDataURIToBinary(dataURI: string): Uint8Array { private convertDataURIToBinary(dataURI: string): Uint8Array {

13
src/file/paragraph/paragraph.ts
View File

@ -10,11 +10,11 @@ import { PageBreak } from "./formatting/page-break";
import { Bookmark, ConcreteHyperlink, ExternalHyperlink, InternalHyperlink } from "./links"; import { Bookmark, ConcreteHyperlink, ExternalHyperlink, InternalHyperlink } from "./links";
import { Math } from "./math"; import { Math } from "./math";
import { IParagraphPropertiesOptions, ParagraphProperties } from "./properties"; import { IParagraphPropertiesOptions, ParagraphProperties } from "./properties";
import { PictureRun, Run, SequentialIdentifier, SymbolRun, TextRun } from "./run"; import { ImageRun, Run, SequentialIdentifier, SymbolRun, TextRun } from "./run";
export type ParagraphChild = export type ParagraphChild =
| TextRun | TextRun
| PictureRun | ImageRun
| SymbolRun | SymbolRun
| Bookmark | Bookmark
| PageBreak | PageBreak
@ -34,7 +34,7 @@ export interface IParagraphOptions extends IParagraphPropertiesOptions {
export class Paragraph extends XmlComponent { export class Paragraph extends XmlComponent {
private readonly properties: ParagraphProperties; private readonly properties: ParagraphProperties;
constructor(options: string | PictureRun | IParagraphOptions) { constructor(options: string | IParagraphOptions) {
super("w:p"); super("w:p");
if (typeof options === "string") { if (typeof options === "string") {
@ -44,13 +44,6 @@ export class Paragraph extends XmlComponent {
return; return;
} }
if (options instanceof PictureRun) {
this.properties = new ParagraphProperties({});
this.root.push(this.properties);
this.root.push(options);
return;
}
this.properties = new ParagraphProperties(options); this.properties = new ParagraphProperties(options);
this.root.push(this.properties); this.root.push(this.properties);

1035
src/file/paragraph/run/image-run.spec.ts Normal file
View File

File diff suppressed because it is too large Load Diff

68
src/file/paragraph/run/image-run.ts Normal file
View File

@ -0,0 +1,68 @@
import { uniqueId } from "convenience-functions";
import { Drawing, IFloating } from "../../drawing";
import { IMediaTransformation } from "../../media";
import { IMediaData } from "../../media/data";
import { Run } from "../run";
import { IContext, IXmlableObject } from "/file/xml-components";
export interface IImageOptions {
readonly data: Buffer | string | Uint8Array | ArrayBuffer;
readonly transformation: IMediaTransformation;
readonly floating?: IFloating;
}
export class ImageRun extends Run {
private readonly key = `${uniqueId()}.png`;
private readonly imageData: IMediaData;
constructor(options: IImageOptions) {
super({});
const newData = typeof options.data === "string" ? this.convertDataURIToBinary(options.data) : options.data;
this.imageData = {
stream: newData,
fileName: this.key,
transformation: {
pixels: {
x: Math.round(options.transformation.width),
y: Math.round(options.transformation.height),
},
emus: {
x: Math.round(options.transformation.width * 9525),
y: Math.round(options.transformation.height * 9525),
},
flip: options.transformation.flip,
rotation: options.transformation.rotation ? options.transformation.rotation * 60000 : undefined,
},
};
const drawing = new Drawing(this.imageData, { floating: options.floating });
this.root.push(drawing);
}
public prepForXml(context: IContext): IXmlableObject | undefined {
context.file.Media.addImage(this.key, this.imageData);
return super.prepForXml(context);
}
private convertDataURIToBinary(dataURI: string): Uint8Array {
// https://gist.github.com/borismus/1032746
// https://github.com/mafintosh/base64-to-uint8array
const BASE64_MARKER = ";base64,";
const base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
if (typeof atob === "function") {
return new Uint8Array(
atob(dataURI.substring(base64Index))
.split("")
.map((c) => c.charCodeAt(0)),
);
} else {
const b = require("buf" + "fer");
return new b.Buffer(dataURI, "base64");
}
}
}

2
src/file/paragraph/run/index.ts
View File

@ -2,7 +2,7 @@ export * from "./run";
export * from "./properties"; export * from "./properties";
export * from "./text-run"; export * from "./text-run";
export * from "./symbol-run"; export * from "./symbol-run";
export * from "./picture-run"; export * from "./image-run";
export * from "./run-fonts"; export * from "./run-fonts";
export * from "./sequential-identifier"; export * from "./sequential-identifier";
export * from "./underline"; export * from "./underline";

14
src/file/paragraph/run/picture-run.ts
View File

@ -1,14 +0,0 @@
import { Drawing } from "../../drawing";
import { IDrawingOptions } from "../../drawing/drawing";
import { IMediaData } from "../../media/data";
import { Run } from "../run";
export class PictureRun extends Run {
constructor(imageData: IMediaData, drawingOptions?: IDrawingOptions) {
super({});
const drawing = new Drawing(imageData, drawingOptions);
this.root.push(drawing);
}
}