0
# Plugin Integration
1

2
jsPDF plugin integration system that adds autoTable methods directly to jsPDF document instances, enabling method chaining and simplified usage patterns.
3

4
## Capabilities
5

6
### applyPlugin Function
7

8
Adds autoTable methods to the jsPDF constructor prototype, enabling usage through jsPDF document instances.
9

10
```typescript { .api }
11
/**
12
 * Applies the autoTable plugin to jsPDF constructor
13
 * @param jsPDF - jsPDF constructor function
14
 */
15
function applyPlugin(jsPDF: jsPDFConstructor): void;
16
```
17

18
**Usage Examples:**
19

20
```typescript
21
import { jsPDF } from "jspdf";
22
import { applyPlugin } from "jspdf-autotable";
23

24
// Apply plugin to jsPDF
25
applyPlugin(jsPDF);
26

27
// Now all jsPDF instances have autoTable methods
28
const doc = new jsPDF();
29

30
doc.autoTable({
31
  head: [['Name', 'Email']],
32
  body: [
33
    ['John Doe', 'john@example.com'],
34
    ['Jane Smith', 'jane@example.com'],
35
  ],
36
});
37

38
// Method chaining is supported
39
doc.autoTable({ /* first table */ })
40
   .autoTable({ /* second table */ });
41

42
doc.save('output.pdf');
43
```
44

45
### Document Instance Methods
46

47
When the plugin is applied, the following methods are added to jsPDF document instances:
48

49
#### doc.autoTable
50

51
Main table generation method on document instances.
52

53
```typescript { .api }
54
/**
55
 * Creates and draws a table on the document instance
56
 * @param options - Table configuration options
57
 * @returns The jsPDF document instance for method chaining
58
 */
59
doc.autoTable(options: UserOptions): jsPDFDocument;
60
```
61

62
**Usage Example:**
63

64
```typescript
65
import { jsPDF } from "jspdf";
66
import { applyPlugin } from "jspdf-autotable";
67

68
applyPlugin(jsPDF);
69
const doc = new jsPDF();
70

71
// Multiple tables with method chaining
72
doc.autoTable({
73
    head: [['Product', 'Price']],
74
    body: [['Laptop', '$999'], ['Phone', '$599']],
75
    startY: 20,
76
  })
77
  .autoTable({
78
    head: [['Service', 'Cost']],
79
    body: [['Support', '$50'], ['Installation', '$100']],
80
    startY: doc.lastAutoTable.finalY + 10,
81
  });
82
```
83

84
#### doc.lastAutoTable
85

86
Reference to the last created table, useful for positioning subsequent tables.
87

88
```typescript { .api }
89
/**
90
 * Reference to the last created table on this document
91
 * Contains table properties including finalY position
92
 */
93
doc.lastAutoTable: Table | false;
94
```
95

96
**Usage Example:**
97

98
```typescript
99
doc.autoTable({
100
  head: [['First Table']],
101
  body: [['Data']],
102
});
103

104
// Position next table after the previous one
105
doc.autoTable({
106
  head: [['Second Table']],
107
  body: [['More Data']],
108
  startY: doc.lastAutoTable.finalY + 10,
109
});
110
```
111

112
#### doc.autoTableText
113

114
Text rendering method with autoTable styling support.
115

116
```typescript { .api }
117
/**
118
 * Renders text with autoTable styling
119
 * @param text - Text content to render
120
 * @param x - X coordinate
121
 * @param y - Y coordinate
122
 * @param styles - Text styling options
123
 */
124
doc.autoTableText(
125
  text: string | string[],
126
  x: number,
127
  y: number,
128
  styles: TextStyles
129
): void;
130
```
131

132
#### doc.autoTableSetDefaults
133

134
Sets default options for all subsequent autoTable calls on this document.
135

136
```typescript { .api }
137
/**
138
 * Sets default options for this document instance
139
 * @param defaults - Default configuration options
140
 * @returns The jsPDF document instance for method chaining
141
 */
142
doc.autoTableSetDefaults(defaults: UserOptions): jsPDFDocument;
143
```
144

145
**Usage Example:**
146

147
```typescript
148
doc.autoTableSetDefaults({
149
  theme: 'grid',
150
  styles: { fontSize: 10 },
151
  headStyles: { fillColor: [41, 128, 185] },
152
  margin: { top: 20 },
153
});
154

155
// All subsequent tables will use these defaults
156
doc.autoTable({
157
  head: [['Name', 'Value']],
158
  body: [['Item 1', '100'], ['Item 2', '200']],
159
});
160
```
161

162
#### doc.autoTableHtmlToJson
163

164
Converts HTML table elements to JSON format for use with autoTable.
165

166
```typescript { .api }
167
/**
168
 * Converts HTML table to JSON format
169
 * @param tableElem - HTML table element to convert
170
 * @param includeHiddenElements - Whether to include hidden elements
171
 * @returns JSON representation of the table or null if in non-browser environment
172
 */
173
doc.autoTableHtmlToJson(
174
  tableElem: HTMLTableElement,
175
  includeHiddenElements?: boolean
176
): { columns: string[]; rows: any[][]; data: any[][] } | null;
177
```
178

179
**Usage Example:**
180

181
```typescript
182
// Get HTML table element
183
const tableElement = document.getElementById('data-table') as HTMLTableElement;
184

185
// Convert to JSON
186
const tableData = doc.autoTableHtmlToJson(tableElement, false);
187

188
if (tableData) {
189
  doc.autoTable({
190
    head: [tableData.columns],
191
    body: tableData.data,
192
  });
193
}
194
```
195

196
### Static Methods
197

198
Static utility methods available on the jsPDF constructor after plugin application:
199

200
#### jsPDF.autoTableSetDefaults
201

202
Sets global default options for all autoTable instances.
203

204
```typescript { .api }
205
/**
206
 * Sets global default options for all jsPDF instances
207
 * @param defaults - Default configuration options
208
 * @param doc - Optional specific document instance
209
 */
210
jsPDF.autoTableSetDefaults(defaults: UserOptions, doc?: jsPDFDocument): void;
211
```
212

213
**Usage Example:**
214

215
```typescript
216
import { jsPDF } from "jspdf";
217
import { applyPlugin } from "jspdf-autotable";
218

219
applyPlugin(jsPDF);
220

221
// Set global defaults
222
jsPDF.autoTableSetDefaults({
223
  theme: 'striped',
224
  styles: { 
225
    fontSize: 8,
226
    textColor: [80, 80, 80],
227
  },
228
  headStyles: {
229
    fillColor: [52, 152, 219],
230
    textColor: [255, 255, 255],
231
  },
232
});
233

234
// All new documents will use these defaults
235
const doc1 = new jsPDF();
236
const doc2 = new jsPDF();
237

238
doc1.autoTable({ /* uses global defaults */ });
239
doc2.autoTable({ /* also uses global defaults */ });
240
```
241

242
### Integration Patterns
243

244
#### Browser Environment (Automatic)
245

246
In browser environments, the plugin is applied automatically when included via script tags:
247

248
```html
249
<script src="jspdf.min.js"></script>
250
<script src="jspdf.plugin.autotable.min.js"></script>
251
<script>
252
  // Plugin is automatically applied
253
  const doc = new jsPDF();
254
  doc.autoTable({
255
    head: [['Column 1', 'Column 2']],
256
    body: [['Data 1', 'Data 2']],
257
  });
258
</script>
259
```
260

261
#### ES6 Module Integration
262

263
```typescript
264
import { jsPDF } from "jspdf";
265
import { applyPlugin } from "jspdf-autotable";
266

267
// Manual plugin application
268
applyPlugin(jsPDF);
269

270
const doc = new jsPDF();
271
doc.autoTable({ /* options */ });
272
```
273

274
#### CommonJS Integration
275

276
```javascript
277
const { jsPDF } = require("jspdf");
278
const { applyPlugin } = require("jspdf-autotable");
279

280
applyPlugin(jsPDF);
281

282
const doc = new jsPDF();
283
doc.autoTable({ /* options */ });
284
```
285

286
#### Mixed Usage Pattern
287

288
You can use both direct function calls and plugin methods in the same application:
289

290
```typescript
291
import { jsPDF } from "jspdf";
292
import { autoTable, applyPlugin } from "jspdf-autotable";
293

294
applyPlugin(jsPDF);
295
const doc = new jsPDF();
296

297
// Direct function usage
298
autoTable(doc, { /* options */ });
299

300
// Plugin method usage
301
doc.autoTable({ /* options */ });
302

303
// Both approaches produce identical results
304
```
305

306
### Type Definitions
307

308
```typescript { .api }
309
type autoTableInstanceType = (options: UserOptions) => void;
310
type jsPDFConstructor = any;
311
type jsPDFDocument = any;
312

313
interface TextStyles {
314
  fontSize?: number;
315
  fontStyle?: FontStyle;
316
  textColor?: Color;
317
  halign?: HAlignType;
318
  valign?: VAlignType;
319
}
320
```