@digicole/pdfmake-rtl 1.0.0 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +232 -168
- package/demo.rtl-document_page-0001.jpg +0 -0
- package/demo.rtl-document_page-0002.jpg +0 -0
- package/index.html +367 -898
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,7 +1,12 @@
|
|
|
1
|
-
# PDFMake RTL
|
|
1
|
+
# PDFMake RTL
|
|
2
|
+
[](https://badge.fury.io/js/%40digicole%2Fpdfmake-rtl)
|
|
3
|
+
[](https://opensource.org/licenses/MIT)
|
|
4
|
+
|
|
2
5
|
|
|
3
6
|
**PDFMake RTL** is an enhanced version of PDFMake with **automatic RTL (Right-to-Left) language support** for Arabic, Persian (Farsi), Urdu, and other RTL scripts. No manual configuration needed - just write your content and the library automatically detects and handles RTL text!
|
|
4
7
|
|
|
8
|
+
All existing PDFMake code works unchanged, with automatic RTL support added!
|
|
9
|
+
|
|
5
10
|
## 🚀 Key Features
|
|
6
11
|
|
|
7
12
|
- ✅ **Automatic RTL Detection** - No need to set `supportRTL` flags
|
|
@@ -13,13 +18,20 @@
|
|
|
13
18
|
- ✅ **Mixed Content Support** - Handles Arabic/Persian/Urdu/English mixed content
|
|
14
19
|
- ✅ **100% PDFMake Compatible** - Drop-in replacement for PDFMake
|
|
15
20
|
|
|
21
|
+
|
|
22
|
+
## 🌐 Live Demo
|
|
23
|
+
|
|
24
|
+
👉 [View Live Demo on Netlify](https://pdfmake-rtl.netlify.app)
|
|
25
|
+
|
|
16
26
|
## 📦 Installation
|
|
17
27
|
|
|
18
28
|
```bash
|
|
19
29
|
npm install @digicole/pdfmake-rtl
|
|
20
30
|
```
|
|
21
31
|
|
|
22
|
-
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
## 🎯 Quick Start NodeJs
|
|
23
35
|
|
|
24
36
|
```javascript
|
|
25
37
|
const PdfPrinter = require('@digicole/pdfmake-rtl');
|
|
@@ -38,6 +50,8 @@ const fonts = {
|
|
|
38
50
|
const printer = new PdfPrinter(fonts);
|
|
39
51
|
|
|
40
52
|
const docDefinition = {
|
|
53
|
+
// force RTL
|
|
54
|
+
// supportRTL:true,
|
|
41
55
|
content: [
|
|
42
56
|
// English text - automatically aligned left
|
|
43
57
|
'This English text will automatically align left',
|
|
@@ -62,6 +76,220 @@ const pdfDoc = printer.createPdfKitDocument(docDefinition);
|
|
|
62
76
|
pdfDoc.pipe(fs.createWriteStream('document.pdf'));
|
|
63
77
|
pdfDoc.end();
|
|
64
78
|
```
|
|
79
|
+
## 💻 Client-Side Usage
|
|
80
|
+
|
|
81
|
+
### Browser Integration
|
|
82
|
+
|
|
83
|
+
Include the RTL-enabled PDFMake in your HTML:
|
|
84
|
+
|
|
85
|
+
```html
|
|
86
|
+
<!DOCTYPE html>
|
|
87
|
+
<html>
|
|
88
|
+
<head>
|
|
89
|
+
<title>PDFMake RTL Client Example</title>
|
|
90
|
+
<script src="https://unpkg.com/@digicole/pdfmake-rtl/build/pdfmake.min.js"></script>
|
|
91
|
+
<script src="https://unpkg.com/@digicole/pdfmake-rtl/build/vfs_fonts.js"></script>
|
|
92
|
+
</head>
|
|
93
|
+
<body>
|
|
94
|
+
<script>
|
|
95
|
+
|
|
96
|
+
pdfMake.vfs = vfs;
|
|
97
|
+
pdfMake.fonts = {
|
|
98
|
+
|
|
99
|
+
Nillima: {
|
|
100
|
+
normal: 'Nillima.ttf',
|
|
101
|
+
bold: 'Nillima.ttf',
|
|
102
|
+
italics: 'Nillima.ttf',
|
|
103
|
+
bolditalics: 'Nillima.ttf',
|
|
104
|
+
},
|
|
105
|
+
Roboto: {
|
|
106
|
+
normal: 'Roboto-Regular.ttf',
|
|
107
|
+
bold: 'Roboto-Medium.ttf',
|
|
108
|
+
italics: 'Roboto-Italic.ttf',
|
|
109
|
+
bolditalics: 'Roboto-MediumItalic.ttf',
|
|
110
|
+
},
|
|
111
|
+
};
|
|
112
|
+
// Arabic/Persian/Urdu content with automatic RTL detection
|
|
113
|
+
const docDefinition = {
|
|
114
|
+
// force RTL
|
|
115
|
+
// supportRTL:true,
|
|
116
|
+
content: [
|
|
117
|
+
// English text (auto-detected as LTR)
|
|
118
|
+
{ text: 'English Title', style: 'header' },
|
|
119
|
+
|
|
120
|
+
// Arabic text (auto-detected as RTL)
|
|
121
|
+
{ text: 'العنوان العربي', style: 'header' },
|
|
122
|
+
|
|
123
|
+
// Persian text (auto-detected as RTL)
|
|
124
|
+
{ text: 'عنوان فارسی', style: 'header' },
|
|
125
|
+
|
|
126
|
+
// Urdu text (auto-detected as RTL)
|
|
127
|
+
{ text: 'اردو عنوان', style: 'header' },
|
|
128
|
+
|
|
129
|
+
// Mixed content table (auto-detects direction per cell)
|
|
130
|
+
{
|
|
131
|
+
table: {
|
|
132
|
+
widths: ['*', '*', '*'],
|
|
133
|
+
body: [
|
|
134
|
+
['Name', 'الاسم', 'نام'], // Headers
|
|
135
|
+
['Ahmed', 'أحمد', 'احمد'], // Arabic/Persian names
|
|
136
|
+
['Fatima', 'فاطمة', 'فاطمہ'], // Mixed scripts
|
|
137
|
+
['Hassan', 'حسن', 'حسن'] // Common across languages
|
|
138
|
+
]
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
|
|
142
|
+
// RTL list (bullets auto-positioned)
|
|
143
|
+
{
|
|
144
|
+
ul: [
|
|
145
|
+
'Arabic: العنصر الأول',
|
|
146
|
+
'Persian: مورد اول',
|
|
147
|
+
'Urdu: پہلا آئٹم',
|
|
148
|
+
'Mixed: Item واحد'
|
|
149
|
+
]
|
|
150
|
+
}
|
|
151
|
+
],
|
|
152
|
+
|
|
153
|
+
styles: {
|
|
154
|
+
header: {
|
|
155
|
+
fontSize: 18,
|
|
156
|
+
bold: true,
|
|
157
|
+
margin: [0, 0, 0, 10]
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
};
|
|
161
|
+
|
|
162
|
+
// Generate and download PDF
|
|
163
|
+
function createPDF() {
|
|
164
|
+
pdfMake.createPdf(docDefinition).download('rtl-document.pdf');
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
// Or open in new window
|
|
168
|
+
function openPDF() {
|
|
169
|
+
pdfMake.createPdf(docDefinition).open();
|
|
170
|
+
}
|
|
171
|
+
</script>
|
|
172
|
+
|
|
173
|
+
<button onclick="createPDF()">Download RTL PDF</button>
|
|
174
|
+
<button onclick="openPDF()">Open RTL PDF</button>
|
|
175
|
+
</body>
|
|
176
|
+
</html>
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
### Advanced Client-Side Features
|
|
180
|
+
|
|
181
|
+
```javascript
|
|
182
|
+
// Custom font configuration for better RTL support
|
|
183
|
+
pdfMake.fonts = {
|
|
184
|
+
Roboto: {
|
|
185
|
+
normal: 'https://fonts.googleapis.com/css2?family=Roboto',
|
|
186
|
+
bold: 'https://fonts.googleapis.com/css2?family=Roboto:wght@700'
|
|
187
|
+
},
|
|
188
|
+
Amiri: {
|
|
189
|
+
normal: 'https://fonts.googleapis.com/css2?family=Amiri',
|
|
190
|
+
bold: 'https://fonts.googleapis.com/css2?family=Amiri:wght@700'
|
|
191
|
+
},
|
|
192
|
+
Vazir: { // Persian font
|
|
193
|
+
normal: 'https://fonts.googleapis.com/css2?family=Vazir',
|
|
194
|
+
bold: 'https://fonts.googleapis.com/css2?family=Vazir:wght@700'
|
|
195
|
+
}
|
|
196
|
+
};
|
|
197
|
+
|
|
198
|
+
// RTL-aware document with automatic detection
|
|
199
|
+
const advancedDoc = {
|
|
200
|
+
content: [
|
|
201
|
+
// Automatic language detection and appropriate styling
|
|
202
|
+
{
|
|
203
|
+
text: 'تقرير شهري - گزارش ماهانه - ماہانہ رپورٹ',
|
|
204
|
+
style: 'title',
|
|
205
|
+
// RTL auto-detected, right-aligned automatically
|
|
206
|
+
},
|
|
207
|
+
|
|
208
|
+
// Dynamic content with RTL detection
|
|
209
|
+
{
|
|
210
|
+
columns: [
|
|
211
|
+
{
|
|
212
|
+
width: '*',
|
|
213
|
+
text: [
|
|
214
|
+
'Statistics:\n',
|
|
215
|
+
'المبيعات: ١٢٣٤\n', // Arabic
|
|
216
|
+
'فروش: ۱۲۳۴\n', // Persian
|
|
217
|
+
'فروخت: ۱۲۳۴' // Urdu
|
|
218
|
+
]
|
|
219
|
+
},
|
|
220
|
+
{
|
|
221
|
+
width: '*',
|
|
222
|
+
text: [
|
|
223
|
+
'Performance:\n',
|
|
224
|
+
'الأداء: ممتاز\n', // Arabic
|
|
225
|
+
'عملکرد: عالی\n', // Persian
|
|
226
|
+
'کارکردگی: بہترین' // Urdu
|
|
227
|
+
]
|
|
228
|
+
}
|
|
229
|
+
]
|
|
230
|
+
}
|
|
231
|
+
],
|
|
232
|
+
|
|
233
|
+
styles: {
|
|
234
|
+
title: {
|
|
235
|
+
fontSize: 20,
|
|
236
|
+
bold: true,
|
|
237
|
+
margin: [0, 0, 0, 20]
|
|
238
|
+
// alignment automatically set based on content direction
|
|
239
|
+
}
|
|
240
|
+
},
|
|
241
|
+
|
|
242
|
+
defaultStyle: {
|
|
243
|
+
// RTL languages get Amiri/Vazir, LTR gets Roboto automatically
|
|
244
|
+
font: 'Roboto'
|
|
245
|
+
}
|
|
246
|
+
};
|
|
247
|
+
```
|
|
248
|
+
|
|
249
|
+
### React/Vue Integration
|
|
250
|
+
|
|
251
|
+
```javascript
|
|
252
|
+
// React component example
|
|
253
|
+
import pdfMake from '@digicole/pdfmake-rtl/build/pdfmake';
|
|
254
|
+
import pdfFonts from '@digicole/pdfmake-rtl/build/vfs_fonts';
|
|
255
|
+
|
|
256
|
+
pdfMake.vfs = pdfFonts;
|
|
257
|
+
|
|
258
|
+
const RTLPDFGenerator = () => {
|
|
259
|
+
const generateRTLReport = () => {
|
|
260
|
+
const docDef = {
|
|
261
|
+
content: [
|
|
262
|
+
{ text: 'تقرير المشروع', style: 'header' }, // Arabic
|
|
263
|
+
{ text: 'گزارش پروژه', style: 'header' }, // Persian
|
|
264
|
+
{ text: 'منصوبہ رپورٹ', style: 'header' }, // Urdu
|
|
265
|
+
|
|
266
|
+
// Auto-detecting table
|
|
267
|
+
{
|
|
268
|
+
table: {
|
|
269
|
+
body: [
|
|
270
|
+
['المرحلة', 'مرحله', 'مرحلہ', 'Status'],
|
|
271
|
+
['التخطيط', 'طراحی', 'منصوبہ بندی', 'Complete'],
|
|
272
|
+
['التنفيذ', 'اجرا', 'عمل درآمد', 'In Progress'],
|
|
273
|
+
['الاختبار', 'تست', 'جانچ', 'Pending']
|
|
274
|
+
]
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
]
|
|
278
|
+
};
|
|
279
|
+
|
|
280
|
+
pdfMake.createPdf(docDef).open();
|
|
281
|
+
};
|
|
282
|
+
|
|
283
|
+
return <button onClick={generateRTLReport}>Generate RTL Report</button>;
|
|
284
|
+
};
|
|
285
|
+
```
|
|
286
|
+
## 📸 Demo Screenshots
|
|
287
|
+
|
|
288
|
+
### 🖼️ Example 1 – Multilingual Automatically Detected
|
|
289
|
+
|
|
290
|
+
|
|
291
|
+
|
|
292
|
+
---
|
|
65
293
|
|
|
66
294
|
## 🌍 Language Support
|
|
67
295
|
|
|
@@ -406,170 +634,7 @@ const advancedLongTableDoc = {
|
|
|
406
634
|
};
|
|
407
635
|
```
|
|
408
636
|
|
|
409
|
-
## 🔄 Migration from PDFMake
|
|
410
|
-
|
|
411
|
-
This is a **drop-in replacement** for PDFMake:
|
|
412
|
-
|
|
413
|
-
```javascript
|
|
414
|
-
// Before
|
|
415
|
-
const PdfPrinter = require('pdfmake');
|
|
416
|
-
|
|
417
|
-
// After
|
|
418
|
-
const PdfPrinter = require('@digicole/pdfmake-rtl');
|
|
419
|
-
```
|
|
420
|
-
|
|
421
|
-
All existing PDFMake code works unchanged, with automatic RTL support added!
|
|
422
|
-
|
|
423
|
-
## 💻 Client-Side Usage
|
|
424
|
-
|
|
425
|
-
### Browser Integration
|
|
426
|
-
|
|
427
|
-
Include the RTL-enabled PDFMake in your HTML:
|
|
428
|
-
|
|
429
|
-
```html
|
|
430
|
-
<!DOCTYPE html>
|
|
431
|
-
<html>
|
|
432
|
-
<head>
|
|
433
|
-
<title>PDFMake RTL Client Example</title>
|
|
434
|
-
<script src="https://unpkg.com/@digicole/pdfmake-rtl/build/pdfmake.min.js"></script>
|
|
435
|
-
<script src="https://unpkg.com/@digicole/pdfmake-rtl/build/vfs_fonts.js"></script>
|
|
436
|
-
</head>
|
|
437
|
-
<body>
|
|
438
|
-
<script>
|
|
439
|
-
// Arabic/Persian/Urdu content with automatic RTL detection
|
|
440
|
-
const docDefinition = {
|
|
441
|
-
content: [
|
|
442
|
-
// English text (auto-detected as LTR)
|
|
443
|
-
{ text: 'English Title', style: 'header' },
|
|
444
|
-
|
|
445
|
-
// Arabic text (auto-detected as RTL)
|
|
446
|
-
{ text: 'العنوان العربي', style: 'header' },
|
|
447
|
-
|
|
448
|
-
// Persian text (auto-detected as RTL)
|
|
449
|
-
{ text: 'عنوان فارسی', style: 'header' },
|
|
450
|
-
|
|
451
|
-
// Urdu text (auto-detected as RTL)
|
|
452
|
-
{ text: 'اردو عنوان', style: 'header' },
|
|
453
|
-
|
|
454
|
-
// Mixed content table (auto-detects direction per cell)
|
|
455
|
-
{
|
|
456
|
-
table: {
|
|
457
|
-
widths: ['*', '*', '*'],
|
|
458
|
-
body: [
|
|
459
|
-
['Name', 'الاسم', 'نام'], // Headers
|
|
460
|
-
['Ahmed', 'أحمد', 'احمد'], // Arabic/Persian names
|
|
461
|
-
['Fatima', 'فاطمة', 'فاطمہ'], // Mixed scripts
|
|
462
|
-
['Hassan', 'حسن', 'حسن'] // Common across languages
|
|
463
|
-
]
|
|
464
|
-
}
|
|
465
|
-
},
|
|
466
|
-
|
|
467
|
-
// RTL list (bullets auto-positioned)
|
|
468
|
-
{
|
|
469
|
-
ul: [
|
|
470
|
-
'Arabic: العنصر الأول',
|
|
471
|
-
'Persian: مورد اول',
|
|
472
|
-
'Urdu: پہلا آئٹم',
|
|
473
|
-
'Mixed: Item واحد'
|
|
474
|
-
]
|
|
475
|
-
}
|
|
476
|
-
],
|
|
477
|
-
|
|
478
|
-
styles: {
|
|
479
|
-
header: {
|
|
480
|
-
fontSize: 18,
|
|
481
|
-
bold: true,
|
|
482
|
-
margin: [0, 0, 0, 10]
|
|
483
|
-
}
|
|
484
|
-
}
|
|
485
|
-
};
|
|
486
|
-
|
|
487
|
-
// Generate and download PDF
|
|
488
|
-
function createPDF() {
|
|
489
|
-
pdfMake.createPdf(docDefinition).download('rtl-document.pdf');
|
|
490
|
-
}
|
|
491
|
-
|
|
492
|
-
// Or open in new window
|
|
493
|
-
function openPDF() {
|
|
494
|
-
pdfMake.createPdf(docDefinition).open();
|
|
495
|
-
}
|
|
496
|
-
</script>
|
|
497
|
-
|
|
498
|
-
<button onclick="createPDF()">Download RTL PDF</button>
|
|
499
|
-
<button onclick="openPDF()">Open RTL PDF</button>
|
|
500
|
-
</body>
|
|
501
|
-
</html>
|
|
502
|
-
```
|
|
503
|
-
|
|
504
|
-
### Advanced Client-Side Features
|
|
505
637
|
|
|
506
|
-
```javascript
|
|
507
|
-
// Custom font configuration for better RTL support
|
|
508
|
-
pdfMake.fonts = {
|
|
509
|
-
Roboto: {
|
|
510
|
-
normal: 'https://fonts.googleapis.com/css2?family=Roboto',
|
|
511
|
-
bold: 'https://fonts.googleapis.com/css2?family=Roboto:wght@700'
|
|
512
|
-
},
|
|
513
|
-
Amiri: {
|
|
514
|
-
normal: 'https://fonts.googleapis.com/css2?family=Amiri',
|
|
515
|
-
bold: 'https://fonts.googleapis.com/css2?family=Amiri:wght@700'
|
|
516
|
-
},
|
|
517
|
-
Vazir: { // Persian font
|
|
518
|
-
normal: 'https://fonts.googleapis.com/css2?family=Vazir',
|
|
519
|
-
bold: 'https://fonts.googleapis.com/css2?family=Vazir:wght@700'
|
|
520
|
-
}
|
|
521
|
-
};
|
|
522
|
-
|
|
523
|
-
// RTL-aware document with automatic detection
|
|
524
|
-
const advancedDoc = {
|
|
525
|
-
content: [
|
|
526
|
-
// Automatic language detection and appropriate styling
|
|
527
|
-
{
|
|
528
|
-
text: 'تقرير شهري - گزارش ماهانه - ماہانہ رپورٹ',
|
|
529
|
-
style: 'title',
|
|
530
|
-
// RTL auto-detected, right-aligned automatically
|
|
531
|
-
},
|
|
532
|
-
|
|
533
|
-
// Dynamic content with RTL detection
|
|
534
|
-
{
|
|
535
|
-
columns: [
|
|
536
|
-
{
|
|
537
|
-
width: '*',
|
|
538
|
-
text: [
|
|
539
|
-
'Statistics:\n',
|
|
540
|
-
'المبيعات: ١٢٣٤\n', // Arabic
|
|
541
|
-
'فروش: ۱۲۳۴\n', // Persian
|
|
542
|
-
'فروخت: ۱۲۳۴' // Urdu
|
|
543
|
-
]
|
|
544
|
-
},
|
|
545
|
-
{
|
|
546
|
-
width: '*',
|
|
547
|
-
text: [
|
|
548
|
-
'Performance:\n',
|
|
549
|
-
'الأداء: ممتاز\n', // Arabic
|
|
550
|
-
'عملکرد: عالی\n', // Persian
|
|
551
|
-
'کارکردگی: بہترین' // Urdu
|
|
552
|
-
]
|
|
553
|
-
}
|
|
554
|
-
]
|
|
555
|
-
}
|
|
556
|
-
],
|
|
557
|
-
|
|
558
|
-
styles: {
|
|
559
|
-
title: {
|
|
560
|
-
fontSize: 20,
|
|
561
|
-
bold: true,
|
|
562
|
-
margin: [0, 0, 0, 20]
|
|
563
|
-
// alignment automatically set based on content direction
|
|
564
|
-
}
|
|
565
|
-
},
|
|
566
|
-
|
|
567
|
-
defaultStyle: {
|
|
568
|
-
// RTL languages get Amiri/Vazir, LTR gets Roboto automatically
|
|
569
|
-
font: 'Roboto'
|
|
570
|
-
}
|
|
571
|
-
};
|
|
572
|
-
```
|
|
573
638
|
|
|
574
639
|
### React/Vue Integration
|
|
575
640
|
|
|
@@ -578,7 +643,7 @@ const advancedDoc = {
|
|
|
578
643
|
import pdfMake from '@digicole/pdfmake-rtl/build/pdfmake';
|
|
579
644
|
import pdfFonts from '@digicole/pdfmake-rtl/build/vfs_fonts';
|
|
580
645
|
|
|
581
|
-
pdfMake.vfs = pdfFonts
|
|
646
|
+
pdfMake.vfs = pdfFonts;
|
|
582
647
|
|
|
583
648
|
const RTLPDFGenerator = () => {
|
|
584
649
|
const generateRTLReport = () => {
|
|
@@ -612,7 +677,6 @@ const RTLPDFGenerator = () => {
|
|
|
612
677
|
|
|
613
678
|
PDF document generation library for server-side and client-side usage in pure JavaScript.
|
|
614
679
|
|
|
615
|
-
Check out [the playground](http://bpampuch.github.io/pdfmake/playground.html) and [examples](https://github.com/bpampuch/pdfmake/tree/0.1/examples).
|
|
616
680
|
|
|
617
681
|
### Features
|
|
618
682
|
|
|
@@ -664,7 +728,7 @@ yarn run build
|
|
|
664
728
|
MIT
|
|
665
729
|
|
|
666
730
|
## Authors pdfmake-rtl
|
|
667
|
-
*[@aysnet1](httpss://github.com/aysnet1)
|
|
731
|
+
* [@aysnet1](httpss://github.com/aysnet1)
|
|
668
732
|
|
|
669
733
|
## Authors pdfmake
|
|
670
734
|
* [@bpampuch](https://github.com/bpampuch) (founder)
|
|
Binary file
|
|
Binary file
|