rtfbuilder/demo/examples/picture.ts at main · nitrotm/rtfbuilder · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
import { RichTextDocumentBuilder, inch, pt, RTFPictureData, readBase64 } from "../../lib"

const builder = new RichTextDocumentBuilder()

// Add some colors
builder.withColor("blue", { red: 0, green: 0, blue: 255 })
builder.withColor("darkgray", { red: 128, green: 128, blue: 128 })

// Sample png
const pictureData: RTFPictureData = {
  format: "png",
  data: readBase64(
    "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAY0lEQVQY032PMRKEMAwDV5CWgrs/8P/30SxFcsRHgceFJVkaO/JWDYjIcy3E72cBxJCnhqxr63hsRAAzwva9FYuY3zA5UCDhlu3ythW3M5xuP8/hTk28T0uWCUrNX6x9HP4zF5CFNasivtrxAAAAAElFTkSuQmCC"
  ),
  width: 10,
  height: 10,
}

// Create a new section
builder.withSection((section) => {
  section.body.withTitle("RTF Picture Demo")
  section.body.withText("This document demonstrates embedding pictures in RTF format.").closeParagraph()

  // Inline picture example
  section.body.withHeading("Inline Picture", 1)
  section.body
    .withText("Here is a small image embedded inline: ")
    .withPicture(pictureData, {
      displayWidth: pt(20),
      displayHeight: pt(20),
    })
    .withText(" within the text.")
    .closeParagraph()

  // Standalone picture with different sizes
  section.body.withHeading("Picture Sizing", 1)

  section.body
    .withText("Original size (10x10 pixels): ")
    .withPicture(pictureData, {
      displayWidth: pt(10),
      displayHeight: pt(10),
    })
    .closeParagraph()

  section.body
    .withText("Scaled to 1 inch: ")
    .withPicture(pictureData, {
      displayWidth: inch(1),
      displayHeight: inch(1),
    })
    .closeParagraph()

  section.body
    .withText("Scaled to 2 inches wide, 1 inch tall: ")
    .withPicture(pictureData, {
      displayWidth: inch(2),
      displayHeight: inch(1),
    })
    .closeParagraph()

  // Multiple pictures in a row
  section.body.withHeading("Multiple Pictures", 1)
  section.body.withText("Three images in a row: ")
  for (let i = 0; i < 3; i++) {
    if (i > 0) section.body.withText(" ")
    section.body.withPicture(pictureData, {
      displayWidth: pt(30),
      displayHeight: pt(30),
    })
  }
  section.body.closeParagraph()

  // Pictures in a table
  section.body.withHeading("Pictures in Tables", 1)
  section.body.withTable((t) => {
    t.column(0, inch(2))
    t.column(1, inch(2))
    t.column(2, inch(2))

    t.withHeaderRow((r) => {
      r.newCell().withText({ bold: true }, "Description")
      r.newCell().newParagraph().center().withText({ bold: true }, "Image")
      r.newCell().withText({ bold: true }, "Size")
    })

    t.withRow((r) => {
      r.newCell().withText("Small")
      r.newCell()
        .middle()
        .newParagraph()
        .center()
        .withPicture(pictureData, {
          displayWidth: pt(20),
          displayHeight: pt(20),
        })
      r.newCell().withText("20pt x 20pt")
    })

    t.withRow((r) => {
      r.newCell().withText("Medium")
      r.newCell()
        .middle()
        .newParagraph()
        .center()
        .withPicture(pictureData, {
          displayWidth: pt(40),
          displayHeight: pt(40),
        })
      r.newCell().withText("40pt x 40pt")
    })

    t.withRow((r) => {
      r.newCell().withText("Large")
      r.newCell()
        .middle()
        .newParagraph()
        .center()
        .withPicture(pictureData, {
          displayWidth: pt(60),
          displayHeight: pt(60),
        })
      r.newCell().withText("60pt x 60pt")
    })
  })

  // Centered picture
  section.body.withHeading("Centered Picture", 1)
  section.body
    .newParagraph()
    .center()
    .withPicture(pictureData, {
      displayWidth: inch(1.5),
      displayHeight: inch(1.5),
    })
})

export default builder