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,
Footer,
HeadingLevel,
Media,
ImageRun,
Packer,
Paragraph,
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({
rows: [
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({
properties: {
top: 700,
@ -204,7 +178,15 @@ doc.addSection({
}),
},
children: [
new Paragraph(image),
new Paragraph(
new ImageRun({
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 100,
height: 100,
},
}),
),
new Paragraph({
text: "HEADING",
heading: HeadingLevel.HEADING_1,
@ -243,12 +225,28 @@ doc.addSection({
style: "normalPara",
}),
table,
new Paragraph(image1),
new Paragraph(
new ImageRun({
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 100,
height: 100,
},
}),
),
new Paragraph({
text: "Test",
style: "normalPara2",
}),
new Paragraph(image2),
new Paragraph(
new ImageRun({
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 100,
height: 100,
},
}),
),
new Paragraph({
text: "Test 2",
style: "normalPara2",

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

@ -1,45 +1,58 @@
// Scaling images
// Import from 'docx' rather than '../build' if you install from npm
import * as fs from "fs";
import { Document, Media, Packer, Paragraph } from "../build";
import { Document, ImageRun, Packer, Paragraph } from "../build";
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({
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) => {

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

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

19
demo/35-hyperlinks.ts
View File

@ -1,7 +1,7 @@
// Example on how to add hyperlinks to websites
// Import from 'docx' rather than '../build' if you install from npm
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({
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({
footers: {
default: new Footer({
@ -86,7 +77,13 @@ doc.addSection({
new Paragraph({
children: [
new ExternalHyperlink({
child: image1,
child: new ImageRun({
data: fs.readFileSync("./demo/images/image1.jpeg"),
transformation: {
width: 100,
height: 100,
},
}),
link: "http://www.google.com",
}),
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
// Import from 'docx' rather than '../build' if you install from npm
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 image = Media.addImage({
document: doc,
data: fs.readFileSync("./demo/images/image1.jpeg"),
transformation: {
width: 100,
height: 100,
},
});
const table = new Table({
rows: [
@ -37,7 +29,19 @@ const table = new Table({
children: [],
}),
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
// Import from 'docx' rather than '../build' if you install from npm
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 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({
headers: {
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")],

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

@ -2,35 +2,10 @@
// Import from 'docx' rather than '../build' if you install from npm
import * as fs from "fs";
// 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 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({
children: [
new Paragraph(
@ -42,7 +17,31 @@ doc.addSection({
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.",
),
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
// Import from 'docx' rather than '../build' if you install from npm
import * as fs from "fs";
// import { Document, Packer, Paragraph } from "../build";
import {
Document,
HorizontalPositionAlign,
HorizontalPositionRelativeFrom,
Media,
ImageRun,
Packer,
Paragraph,
VerticalPositionAlign,
@ -15,106 +14,118 @@ import {
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({
children: [
new Paragraph("Hello World"),
new Paragraph(image1),
new Paragraph(image2),
new Paragraph(image3),
new Paragraph(image4),
new Paragraph(image5),
new Paragraph(image6),
new Paragraph(image7),
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").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 * 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 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({
rows: [
new TableRow({
children: [
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,
}),
new TableCell({
@ -52,7 +47,19 @@ const table = new Table({
],
}),
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,
}),
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
// Import from 'docx' rather than '../build' if you install from npm
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 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({
headers: {
default: new Header({
children: [
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({
children: [
new Paragraph({
children: [image2],
children: [
new ImageRun({
data: fs.readFileSync("./demo/images/pizza.gif"),
transformation: {
width: 100,
height: 100,
},
}),
],
}),
],
}),