توليد PDF في TypeScript: نظرة عامة على المكتبات والأدوات

توليد PDF في TypeScript: نظرة عامة على الأدوات

يعد توليد مستندات PDF إحدى المهام الشائعة في تطوير الويب. بفضل TypeScript والمكتبات القوية، يمكنك إنشاء تقارير معقدة وفواتير وشهادات ومستندات أخرى مباشرة في المتصفح أو على الخادم (Node.js). في هذه المقالة، سنستعرض المكتبات الرئيسية للعمل مع PDF في TypeScript، وميزاتها وأمثلة على استخدامها.

1. jsPDF — مكتبة خفيفة وشائعة

jsPDF هي واحدة من أكثر المكتبات انتشارًا لإنشاء PDF على جانب العميل. تتيح لك توليد المستندات مباشرة في المتصفح باستخدام JavaScript/TypeScript فقط. تدعم المكتبة النصوص والصور والجداول والتنسيق الأساسي.

التثبيت

npm install jspdf @types/jspdf

مثال: إنشاء PDF بسيط

import { jsPDF } from 'jspdf';

const doc = new jsPDF();doc.text('مرحبًا بالعالم!', 10, 10);doc.save('document.pdf');

الإيجابيات والسلبيات

• ✅ سهولة الاستخدام
• ✅ يعمل في المتصفح و Node.js (مع وحدات إضافية)
• ❌ دعم محدود للتخطيطات المعقدة
• ❌ صعوبة العمل مع الجداول (يتطلب ضبطًا يدويًا)

2. PDFKit — أداة قوية للتوليد على الخادم

PDFKit هي مكتبة لـ Node.js توفر تحكمًا كاملاً في إنشاء PDF. وهي مثالية لتوليد المستندات المعقدة على الخادم: التقارير والفواتير والكتيبات. تدعم الخطوط والتدرجات والرسومات المتجهة والمستندات متعددة الصفحات.

التثبيت

npm install pdfkit @types/pdfkit

مثال: إنشاء PDF مع نص وصورة

import PDFDocument from 'pdfkit';import fs from 'fs';

const doc = new PDFDocument();doc.pipe(fs.createWriteStream('output.pdf'));

doc.fontSize(25).text('عنوان', 100, 100);doc.image('path/to/image.png', 100, 150, { width: 200 });doc.end();

الإيجابيات والسلبيات

• ✅ المرونة والتحكم الكامل
• ✅ دعم الرسومات المعقدة
• ❌ لا يعمل في المتصفح (فقط Node.js)
• ❌ واجهة برمجة تطبيقات أكثر تعقيدًا مقارنة بـ jsPDF

3. Puppeteer — التوليد من HTML إلى PDF

Puppeteer هي مكتبة للتحكم في متصفح Chrome بدون واجهة رسومية. تتيح لك تحويل صفحات HTML إلى PDF، وهو أمر مفيد إذا كان لديك بالفعل تخطيط للمستند (مثل فاتورة أو تقرير). مناسبة للتوليد على جانب العميل والخادم.

التثبيت

npm install puppeteer

مثال: توليد PDF من HTML

import puppeteer from 'puppeteer';

async function generatePDF() {  const browser = await puppeteer.launch();  const page = await browser.newPage();  await page.setContent('<h1>مرحبًا، PDF!</h1><p>هذا تقرير.</p>');  await page.pdf({ path: 'report.pdf', format: 'A4' });  await browser.close();}

generatePDF();

الإيجابيات والسلبيات

• ✅ استخدام كامل لـ CSS و HTML
• ✅ دعم التخطيطات والأنماط المعقدة
• ❌ يتطلب تثبيت Chrome (حجم كبير)
• ❌ أبطأ من المكتبات المتخصصة

4. pdfmake — التوليد بناءً على هيكل JSON

pdfmake هي مكتبة تستخدم نهجًا تصريحيًا: تصف هيكل المستند في JSON، وتقوم المكتبة ببناء PDF بنفسها. مثالية لإنشاء الجداول والقوائم والتقارير.

التثبيت

npm install pdfmake @types/pdfmake

مثال: إنشاء PDF مع جدول

import pdfMake from 'pdfmake/build/pdfmake';import pdfFonts from 'pdfmake/build/vfs_fonts';

pdfMake.vfs = pdfFonts.pdfMake.vfs;

const docDefinition = {  content: [    { text: 'تقرير'