@digicole/pdfmake-rtl 1.0.0 → 1.1.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 +244 -4
- 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,4 +1,7 @@
|
|
|
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
|
|
|
@@ -13,13 +16,18 @@
|
|
|
13
16
|
- ✅ **Mixed Content Support** - Handles Arabic/Persian/Urdu/English mixed content
|
|
14
17
|
- ✅ **100% PDFMake Compatible** - Drop-in replacement for PDFMake
|
|
15
18
|
|
|
19
|
+
|
|
20
|
+
## 🌐 Live Demo
|
|
21
|
+
|
|
22
|
+
👉 [View Live Demo on Netlify](https://pdfmake-rtl.netlify.app)
|
|
23
|
+
|
|
16
24
|
## 📦 Installation
|
|
17
25
|
|
|
18
26
|
```bash
|
|
19
27
|
npm install @digicole/pdfmake-rtl
|
|
20
28
|
```
|
|
21
29
|
|
|
22
|
-
## 🎯 Quick Start
|
|
30
|
+
## 🎯 Quick Start NodeJs
|
|
23
31
|
|
|
24
32
|
```javascript
|
|
25
33
|
const PdfPrinter = require('@digicole/pdfmake-rtl');
|
|
@@ -38,6 +46,8 @@ const fonts = {
|
|
|
38
46
|
const printer = new PdfPrinter(fonts);
|
|
39
47
|
|
|
40
48
|
const docDefinition = {
|
|
49
|
+
// force RTL
|
|
50
|
+
// supportRTL:true,
|
|
41
51
|
content: [
|
|
42
52
|
// English text - automatically aligned left
|
|
43
53
|
'This English text will automatically align left',
|
|
@@ -62,6 +72,220 @@ const pdfDoc = printer.createPdfKitDocument(docDefinition);
|
|
|
62
72
|
pdfDoc.pipe(fs.createWriteStream('document.pdf'));
|
|
63
73
|
pdfDoc.end();
|
|
64
74
|
```
|
|
75
|
+
## 💻 Client-Side Usage
|
|
76
|
+
|
|
77
|
+
### Browser Integration
|
|
78
|
+
|
|
79
|
+
Include the RTL-enabled PDFMake in your HTML:
|
|
80
|
+
|
|
81
|
+
```html
|
|
82
|
+
<!DOCTYPE html>
|
|
83
|
+
<html>
|
|
84
|
+
<head>
|
|
85
|
+
<title>PDFMake RTL Client Example</title>
|
|
86
|
+
<script src="https://unpkg.com/@digicole/pdfmake-rtl/build/pdfmake.min.js"></script>
|
|
87
|
+
<script src="https://unpkg.com/@digicole/pdfmake-rtl/build/vfs_fonts.js"></script>
|
|
88
|
+
</head>
|
|
89
|
+
<body>
|
|
90
|
+
<script>
|
|
91
|
+
|
|
92
|
+
pdfMake.vfs = vfs;
|
|
93
|
+
pdfMake.fonts = {
|
|
94
|
+
|
|
95
|
+
Nillima: {
|
|
96
|
+
normal: 'Nillima.ttf',
|
|
97
|
+
bold: 'Nillima.ttf',
|
|
98
|
+
italics: 'Nillima.ttf',
|
|
99
|
+
bolditalics: 'Nillima.ttf',
|
|
100
|
+
},
|
|
101
|
+
Roboto: {
|
|
102
|
+
normal: 'Roboto-Regular.ttf',
|
|
103
|
+
bold: 'Roboto-Medium.ttf',
|
|
104
|
+
italics: 'Roboto-Italic.ttf',
|
|
105
|
+
bolditalics: 'Roboto-MediumItalic.ttf',
|
|
106
|
+
},
|
|
107
|
+
};
|
|
108
|
+
// Arabic/Persian/Urdu content with automatic RTL detection
|
|
109
|
+
const docDefinition = {
|
|
110
|
+
// force RTL
|
|
111
|
+
// supportRTL:true,
|
|
112
|
+
content: [
|
|
113
|
+
// English text (auto-detected as LTR)
|
|
114
|
+
{ text: 'English Title', style: 'header' },
|
|
115
|
+
|
|
116
|
+
// Arabic text (auto-detected as RTL)
|
|
117
|
+
{ text: 'العنوان العربي', style: 'header' },
|
|
118
|
+
|
|
119
|
+
// Persian text (auto-detected as RTL)
|
|
120
|
+
{ text: 'عنوان فارسی', style: 'header' },
|
|
121
|
+
|
|
122
|
+
// Urdu text (auto-detected as RTL)
|
|
123
|
+
{ text: 'اردو عنوان', style: 'header' },
|
|
124
|
+
|
|
125
|
+
// Mixed content table (auto-detects direction per cell)
|
|
126
|
+
{
|
|
127
|
+
table: {
|
|
128
|
+
widths: ['*', '*', '*'],
|
|
129
|
+
body: [
|
|
130
|
+
['Name', 'الاسم', 'نام'], // Headers
|
|
131
|
+
['Ahmed', 'أحمد', 'احمد'], // Arabic/Persian names
|
|
132
|
+
['Fatima', 'فاطمة', 'فاطمہ'], // Mixed scripts
|
|
133
|
+
['Hassan', 'حسن', 'حسن'] // Common across languages
|
|
134
|
+
]
|
|
135
|
+
}
|
|
136
|
+
},
|
|
137
|
+
|
|
138
|
+
// RTL list (bullets auto-positioned)
|
|
139
|
+
{
|
|
140
|
+
ul: [
|
|
141
|
+
'Arabic: العنصر الأول',
|
|
142
|
+
'Persian: مورد اول',
|
|
143
|
+
'Urdu: پہلا آئٹم',
|
|
144
|
+
'Mixed: Item واحد'
|
|
145
|
+
]
|
|
146
|
+
}
|
|
147
|
+
],
|
|
148
|
+
|
|
149
|
+
styles: {
|
|
150
|
+
header: {
|
|
151
|
+
fontSize: 18,
|
|
152
|
+
bold: true,
|
|
153
|
+
margin: [0, 0, 0, 10]
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
};
|
|
157
|
+
|
|
158
|
+
// Generate and download PDF
|
|
159
|
+
function createPDF() {
|
|
160
|
+
pdfMake.createPdf(docDefinition).download('rtl-document.pdf');
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
// Or open in new window
|
|
164
|
+
function openPDF() {
|
|
165
|
+
pdfMake.createPdf(docDefinition).open();
|
|
166
|
+
}
|
|
167
|
+
</script>
|
|
168
|
+
|
|
169
|
+
<button onclick="createPDF()">Download RTL PDF</button>
|
|
170
|
+
<button onclick="openPDF()">Open RTL PDF</button>
|
|
171
|
+
</body>
|
|
172
|
+
</html>
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
### Advanced Client-Side Features
|
|
176
|
+
|
|
177
|
+
```javascript
|
|
178
|
+
// Custom font configuration for better RTL support
|
|
179
|
+
pdfMake.fonts = {
|
|
180
|
+
Roboto: {
|
|
181
|
+
normal: 'https://fonts.googleapis.com/css2?family=Roboto',
|
|
182
|
+
bold: 'https://fonts.googleapis.com/css2?family=Roboto:wght@700'
|
|
183
|
+
},
|
|
184
|
+
Amiri: {
|
|
185
|
+
normal: 'https://fonts.googleapis.com/css2?family=Amiri',
|
|
186
|
+
bold: 'https://fonts.googleapis.com/css2?family=Amiri:wght@700'
|
|
187
|
+
},
|
|
188
|
+
Vazir: { // Persian font
|
|
189
|
+
normal: 'https://fonts.googleapis.com/css2?family=Vazir',
|
|
190
|
+
bold: 'https://fonts.googleapis.com/css2?family=Vazir:wght@700'
|
|
191
|
+
}
|
|
192
|
+
};
|
|
193
|
+
|
|
194
|
+
// RTL-aware document with automatic detection
|
|
195
|
+
const advancedDoc = {
|
|
196
|
+
content: [
|
|
197
|
+
// Automatic language detection and appropriate styling
|
|
198
|
+
{
|
|
199
|
+
text: 'تقرير شهري - گزارش ماهانه - ماہانہ رپورٹ',
|
|
200
|
+
style: 'title',
|
|
201
|
+
// RTL auto-detected, right-aligned automatically
|
|
202
|
+
},
|
|
203
|
+
|
|
204
|
+
// Dynamic content with RTL detection
|
|
205
|
+
{
|
|
206
|
+
columns: [
|
|
207
|
+
{
|
|
208
|
+
width: '*',
|
|
209
|
+
text: [
|
|
210
|
+
'Statistics:\n',
|
|
211
|
+
'المبيعات: ١٢٣٤\n', // Arabic
|
|
212
|
+
'فروش: ۱۲۳۴\n', // Persian
|
|
213
|
+
'فروخت: ۱۲۳۴' // Urdu
|
|
214
|
+
]
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
width: '*',
|
|
218
|
+
text: [
|
|
219
|
+
'Performance:\n',
|
|
220
|
+
'الأداء: ممتاز\n', // Arabic
|
|
221
|
+
'عملکرد: عالی\n', // Persian
|
|
222
|
+
'کارکردگی: بہترین' // Urdu
|
|
223
|
+
]
|
|
224
|
+
}
|
|
225
|
+
]
|
|
226
|
+
}
|
|
227
|
+
],
|
|
228
|
+
|
|
229
|
+
styles: {
|
|
230
|
+
title: {
|
|
231
|
+
fontSize: 20,
|
|
232
|
+
bold: true,
|
|
233
|
+
margin: [0, 0, 0, 20]
|
|
234
|
+
// alignment automatically set based on content direction
|
|
235
|
+
}
|
|
236
|
+
},
|
|
237
|
+
|
|
238
|
+
defaultStyle: {
|
|
239
|
+
// RTL languages get Amiri/Vazir, LTR gets Roboto automatically
|
|
240
|
+
font: 'Roboto'
|
|
241
|
+
}
|
|
242
|
+
};
|
|
243
|
+
```
|
|
244
|
+
|
|
245
|
+
### React/Vue Integration
|
|
246
|
+
|
|
247
|
+
```javascript
|
|
248
|
+
// React component example
|
|
249
|
+
import pdfMake from '@digicole/pdfmake-rtl/build/pdfmake';
|
|
250
|
+
import pdfFonts from '@digicole/pdfmake-rtl/build/vfs_fonts';
|
|
251
|
+
|
|
252
|
+
pdfMake.vfs = pdfFonts;
|
|
253
|
+
|
|
254
|
+
const RTLPDFGenerator = () => {
|
|
255
|
+
const generateRTLReport = () => {
|
|
256
|
+
const docDef = {
|
|
257
|
+
content: [
|
|
258
|
+
{ text: 'تقرير المشروع', style: 'header' }, // Arabic
|
|
259
|
+
{ text: 'گزارش پروژه', style: 'header' }, // Persian
|
|
260
|
+
{ text: 'منصوبہ رپورٹ', style: 'header' }, // Urdu
|
|
261
|
+
|
|
262
|
+
// Auto-detecting table
|
|
263
|
+
{
|
|
264
|
+
table: {
|
|
265
|
+
body: [
|
|
266
|
+
['المرحلة', 'مرحله', 'مرحلہ', 'Status'],
|
|
267
|
+
['التخطيط', 'طراحی', 'منصوبہ بندی', 'Complete'],
|
|
268
|
+
['التنفيذ', 'اجرا', 'عمل درآمد', 'In Progress'],
|
|
269
|
+
['الاختبار', 'تست', 'جانچ', 'Pending']
|
|
270
|
+
]
|
|
271
|
+
}
|
|
272
|
+
}
|
|
273
|
+
]
|
|
274
|
+
};
|
|
275
|
+
|
|
276
|
+
pdfMake.createPdf(docDef).open();
|
|
277
|
+
};
|
|
278
|
+
|
|
279
|
+
return <button onClick={generateRTLReport}>Generate RTL Report</button>;
|
|
280
|
+
};
|
|
281
|
+
```
|
|
282
|
+
## 📸 Demo Screenshots
|
|
283
|
+
|
|
284
|
+
### 🖼️ Example 1 – Multilingual Automatically Detected
|
|
285
|
+
|
|
286
|
+
|
|
287
|
+
|
|
288
|
+
---
|
|
65
289
|
|
|
66
290
|
## 🌍 Language Support
|
|
67
291
|
|
|
@@ -436,6 +660,23 @@ Include the RTL-enabled PDFMake in your HTML:
|
|
|
436
660
|
</head>
|
|
437
661
|
<body>
|
|
438
662
|
<script>
|
|
663
|
+
|
|
664
|
+
pdfMake.vfs = vfs;
|
|
665
|
+
pdfMake.fonts = {
|
|
666
|
+
|
|
667
|
+
Nillima: {
|
|
668
|
+
normal: 'Nillima.ttf',
|
|
669
|
+
bold: 'Nillima.ttf',
|
|
670
|
+
italics: 'Nillima.ttf',
|
|
671
|
+
bolditalics: 'Nillima.ttf',
|
|
672
|
+
},
|
|
673
|
+
Roboto: {
|
|
674
|
+
normal: 'Roboto-Regular.ttf',
|
|
675
|
+
bold: 'Roboto-Medium.ttf',
|
|
676
|
+
italics: 'Roboto-Italic.ttf',
|
|
677
|
+
bolditalics: 'Roboto-MediumItalic.ttf',
|
|
678
|
+
},
|
|
679
|
+
};
|
|
439
680
|
// Arabic/Persian/Urdu content with automatic RTL detection
|
|
440
681
|
const docDefinition = {
|
|
441
682
|
content: [
|
|
@@ -578,7 +819,7 @@ const advancedDoc = {
|
|
|
578
819
|
import pdfMake from '@digicole/pdfmake-rtl/build/pdfmake';
|
|
579
820
|
import pdfFonts from '@digicole/pdfmake-rtl/build/vfs_fonts';
|
|
580
821
|
|
|
581
|
-
pdfMake.vfs = pdfFonts
|
|
822
|
+
pdfMake.vfs = pdfFonts;
|
|
582
823
|
|
|
583
824
|
const RTLPDFGenerator = () => {
|
|
584
825
|
const generateRTLReport = () => {
|
|
@@ -612,7 +853,6 @@ const RTLPDFGenerator = () => {
|
|
|
612
853
|
|
|
613
854
|
PDF document generation library for server-side and client-side usage in pure JavaScript.
|
|
614
855
|
|
|
615
|
-
Check out [the playground](http://bpampuch.github.io/pdfmake/playground.html) and [examples](https://github.com/bpampuch/pdfmake/tree/0.1/examples).
|
|
616
856
|
|
|
617
857
|
### Features
|
|
618
858
|
|
|
Binary file
|
|
Binary file
|