پی ڈی ایف فائلیں بنانا ایک ایسا کام ہے جو زیادہ تر ڈویلپرز کو بالآخر کرنا پڑے گا۔ چاہے یہ انوائس، رپورٹ، یا ڈاؤن لوڈ کے قابل دستاویز ہو، پی ڈی ایف اب بھی سب سے زیادہ استعمال ہونے والے فارمیٹس میں سے ایک ہے۔
ایک عام نقطہ نظر میں پسدید خدمات شامل ہیں۔ سرور کو ڈیٹا بھیجیں، سرور پر ایک فائل بنائیں، اور اسے صارف کو واپس کریں۔ یہ کام کرتا ہے، لیکن پیچیدگی، تاخیر، اور دیکھ بھال اوور ہیڈ کو شامل کرتا ہے۔
جدید براؤزرز میں یہ کام بہت آسان ہو گیا ہے۔
اس ٹیوٹوریل میں، آپ جاوا اسکرپٹ کا استعمال کرتے ہوئے اپنے براؤزر میں براہ راست پی ڈی ایف فائل بنانے کا طریقہ سیکھیں گے۔ اس میں کوئی سرور شامل نہیں ہے، کوئی فائل اپ لوڈ نہیں ہے، کلائنٹ کی طرف سے سب کچھ فوری طور پر ہوتا ہے۔
عملییت کی خاطر، ہم یہ دیکھنے کے لیے ایک سادہ انوائس طرز کا پی ڈی ایف جنریٹر بنائیں گے کہ یہ حقیقی دنیا کے منظر نامے میں کیسے کام کرتا ہے۔
انڈیکس
-
براؤزر میں پی ڈی ایف تخلیق کیسے کام کرتی ہے۔
-
پروجیکٹ کی ترتیبات
-
ہم کون سی لائبریری استعمال کر رہے ہیں؟
-
ایک HTML ڈھانچہ بنائیں
-
PDF بنانے کے لیے JavaScript شامل کریں۔
-
پی ڈی ایف کیسے بنائے جاتے ہیں۔
-
متحرک مواد کو سنبھالنا (اہم)
-
لے آؤٹ اور وقفہ کاری میں بہتری
-
پی ڈی ایف ڈاؤن لوڈ کرنے کا طریقہ
-
عملی استعمال کے لیے اہم نوٹ
-
سے بچنے کے لئے عام غلطیاں
-
ڈیمو: پی ڈی ایف جنریٹر کیسے کام کرتا ہے۔
-
نتیجہ
براؤزر میں پی ڈی ایف تخلیق کیسے کام کرتی ہے۔
پی ڈی ایف بنیادی طور پر ایک ساختی دستاویز ہے جو اس بات کی وضاحت کرتی ہے کہ صفحہ پر متن اور عناصر کیسے رکھے جاتے ہیں۔
اس ڈھانچے کو دستی طور پر بنانے کے بجائے، آپ JavaScript لائبریری کا استعمال کرتے ہیں جو اسے آپ کے لیے ہینڈل کرتی ہے۔ جب آپ مواد کو لائبریری میں منتقل کرتے ہیں، تو ایک ڈاؤن لوڈ کے قابل فائل بن جاتی ہے۔
یہاں سب سے بڑا فائدہ یہ ہے کہ ہر چیز مقامی طور پر چلتی ہے۔ یہ عمل کو تیز تر بناتا ہے اور آپ کے ڈیٹا کو سرور پر بھیجے جانے سے روکتا ہے۔
پروجیکٹ کی ترتیبات
یہ منصوبہ جان بوجھ کر آسان ہے۔
آپ کو صرف ایک HTML فائل اور جاوا اسکرپٹ فائل کی ضرورت ہے۔ کوئی پسدید، API یا ڈیٹا بیس کی ضرورت نہیں ہے۔ یہ سمجھنے پر توجہ مرکوز کرتا ہے کہ براؤزر میں پی ڈی ایف تخلیق کیسے کام کرتی ہے۔
ہم کون سی لائبریری استعمال کر رہے ہیں؟
ہم استعمال کریں گے jsPDFایک ہلکی پھلکی لائبریری جو آپ کو جاوا اسکرپٹ سے براہ راست پی ڈی ایف فائلیں بنانے کی اجازت دیتی ہے۔
CDN کا استعمال کرتے ہوئے شامل کریں۔
ایک HTML ڈھانچہ بنائیں
آئیے ایک سادہ انٹرفیس کے ساتھ شروع کریں جو صارفین کو انوائس ڈیٹا داخل کرنے اور پی ڈی ایف بنانے کی اجازت دیتا ہے۔
یہ ایک بنیادی ان پٹ فلو بناتا ہے جو صارف کو PDF کا عنوان اور مواد فراہم کرنے کی اجازت دیتا ہے۔
حقیقی دنیا کی ایپلی کیشنز میں، اس ان پٹ میں مزید سٹرکچرڈ ڈیٹا شامل ہو سکتا ہے، جیسے کہ کسٹمر کی تفصیلات، اشیاء کی فہرستیں، اور قیمتیں۔ لیکن اس ٹیوٹوریل کے لیے، ہم چیزوں کو سادہ رکھیں گے اور اس بات پر توجہ مرکوز کریں گے کہ پی ڈی ایف تخلیق کیسے کام کرتی ہے۔
PDF بنانے کے لیے JavaScript شامل کریں۔
اب ہم ان پٹ کو پی ڈی ایف لاجک سے جوڑتے ہیں۔
function generatePDF() {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
const title = document.getElementById("title").value;
const content = document.getElementById("content").value;
if (!title.trim() && !content.trim()) {
alert("Please enter valid content before generating the PDF.");
return;
}
const margin = 10;
let y = 20;
const pageWidth = doc.internal.pageSize.getWidth();
const pageHeight = doc.internal.pageSize.getHeight();
const maxWidth = pageWidth - margin * 2;
doc.setFontSize(18);
// ✅ Wrap title
const titleLines = doc.splitTextToSize(title, maxWidth);
doc.text(titleLines, margin, y);
const titleLineHeight = doc.getLineHeight() / doc.internal.scaleFactor;
y += titleLines.length * titleLineHeight + 5;
doc.setFontSize(12);
// ✅ Wrap content
const lines = doc.splitTextToSize(content, maxWidth);
const lineHeight = doc.getLineHeight() / doc.internal.scaleFactor;
lines.forEach((line) => {
// ✅ Page break
if (y > pageHeight - margin) {
doc.addPage();
y = margin;
}
doc.text(line, margin, y);
y += lineHeight;
});
doc.save("invoice.pdf");
}
یہ براہ راست آپ کے براؤزر میں پی ڈی ایف بنائے گا۔ یہ لمبے متن کو سنبھالتا ہے، مناسب وقفہ برقرار رکھتا ہے، اور جب مواد صفحہ کی اونچائی سے زیادہ ہو جاتا ہے تو خود بخود نئے صفحات شامل کرتا ہے۔
پی ڈی ایف کیسے بنائے جاتے ہیں۔
jsPDF شروع کرنے سے ایک خالی دستاویز بنتی ہے۔
ہر ایک text() کال مخصوص کوآرڈینیٹس پر مواد رکھتی ہے۔ یہ آپ کو لے آؤٹ پر مکمل کنٹرول فراہم کرتا ہے، لیکن اس کا مطلب یہ بھی ہے کہ آپ کو وقفہ کاری کا احتیاط سے انتظام کرنا ہوگا۔
آخر میں، کال کریں save() ہر چیز کو ڈاؤن لوڈ کے قابل فائلوں میں تبدیل کرتا ہے۔
متحرک مواد کو سنبھالنا (اہم)
حقیقی دنیا کے استعمال کے معاملات میں، جیسے کہ رسیدیں، مواد کی لمبائی شاذ و نادر ہی طے کی جاتی ہے۔ جب صارفین ایک سے زیادہ لائنیں یا لمبا متن داخل کرتے ہیں، تو صفحہ اوور فلو یا صفحہ سے دور ہو سکتا ہے۔
اس کو سنبھالنے کے لیے، آپ کو ایک مقررہ قدر استعمال کرنے کے بجائے صفحہ کی چوڑائی کی بنیاد پر متن کو لپیٹنا ہوگا۔
const pageWidth = doc.internal.pageSize.getWidth();
const margin = 10;
const maxWidth = pageWidth - margin * 2;
const lines = doc.splitTextToSize(content, maxWidth);
doc.text(lines, margin, 40);
یہ مواد کو صحیح طریقے سے لپیٹنے اور صفحہ کے اندر فٹ ہونے کی اجازت دے گا۔
اگر مواد طویل ہے، تو وقفہ کاری کو بھی متحرک طور پر اپ ڈیٹ کرنے کی ضرورت ہے۔
const lineHeight = doc.getLineHeight() / doc.internal.scaleFactor;
let y = 40;
lines.forEach((line) => {
doc.text(line, margin, y);
y += lineHeight;
});
یہ ترتیب کو پڑھنے میں آسان رکھنے میں مدد کرتا ہے اور متحرک ان پٹ کے ساتھ کام کرتے وقت اوور لیپنگ کو روکتا ہے۔
لے آؤٹ اور وقفہ کاری میں بہتری
ایک اچھی ترتیب آپ کی پی ڈی ایف کی شکل و صورت میں بڑا فرق لاتی ہے۔
ہر چیز کو ایک مقررہ جگہ پر رکھنے کے بجائے، آپ بتدریج Y پوزیشن کو ایڈجسٹ کر سکتے ہیں جیسے جیسے آپ کا مواد بڑھتا ہے۔ اس سے آپ کو ڈپلیکیشن سے بچنے میں مدد ملے گی اور آپ کی دستاویز کو بصری طور پر ڈھانچے گا۔
مثال کے طور پر، مقام کو ہارڈ کوڈ کرنے کے بجائے، آپ یہ کر سکتے ہیں:
const margin = 10;
let y = 20;
const pageWidth = doc.internal.pageSize.getWidth();
const maxWidth = pageWidth - margin * 2;
doc.setFontSize(18);
// Wrap title
const titleLines = doc.splitTextToSize(title, maxWidth);
doc.text(titleLines, margin, y);
const lineHeight = doc.getLineHeight() / doc.internal.scaleFactor;
y += titleLines.length * lineHeight + 5;
doc.setFontSize(12);
// Wrap content
const lines = doc.splitTextToSize(content, maxWidth);
doc.text(lines, margin, y);
y += lines.length * lineHeight;
یہاں y قدر ایک مقررہ وقفہ کی بجائے اصل مواد کی اونچائی کی بنیاد پر بڑھتی ہے۔ یہ عناصر کے درمیان مستقل وقفہ کو یقینی بنائے گا اور اوورلیپنگ کو روکے گا۔
ایک اور اہم مسئلہ طویل متن کو سنبھالنا ہے۔ اگر آپ کا مواد بہت لمبا ہے، تو یہ صفحہ کی چوڑائی سے آگے بڑھ سکتا ہے یا دوسرے عناصر کو اوورلیپ کر سکتا ہے۔ آپ کو ہمیشہ ایک مقررہ قدر استعمال کرنے کے بجائے متحرک طور پر چوڑائی کا حساب لگانا چاہیے۔
const pageWidth = doc.internal.pageSize.getWidth();
const maxWidth = pageWidth - margin * 2;
const lines = doc.splitTextToSize(content, maxWidth);
doc.text(lines, margin, y);
یہ خود کار طریقے سے متن کو متعدد لائنوں میں تقسیم کرتا ہے تاکہ یہ صفحہ کے اندر مناسب طریقے سے فٹ ہوجائے۔
ڈائنامک اسپیسنگ اور ٹیکسٹ ریپنگ کا امتزاج اس بات کو یقینی بناتا ہے کہ آپ کے مواد کے سائز میں تبدیلی کے باوجود آپ کا لے آؤٹ صاف اور پڑھنے کے قابل رہے۔ یہ خاص طور پر اہم ہے جب ایسی دستاویزات بناتے ہیں جیسے انوائسز جن کے لیے متعدد سیکشنز میں مستقل سیدھ کی ضرورت ہوتی ہے۔
پی ڈی ایف ڈاؤن لوڈ کرنے کا طریقہ
ڈاؤن لوڈ کے عمل کو استعمال کرتے ہوئے سنبھالا جاتا ہے: save() طریقہ:
doc.save("invoice.pdf");
یہ آپ کے براؤزر کو پی ڈی ایف بنانے اور اسے فوری ڈاؤن لوڈ کرنے کو کہتا ہے۔
آپ صارف کے ان پٹ کی بنیاد پر فائل کے ناموں کو متحرک طور پر بھی اپنی مرضی کے مطابق بنا سکتے ہیں۔
const fileName = (title || "document").trim() + ".pdf";
doc.save(fileName);
یہ آپ کی ڈاؤن لوڈ کی گئی فائلوں کو ہمیشہ ایک مقررہ نام استعمال کرنے کے بجائے زیادہ معنی خیز بنائے گا۔
سب کچھ براؤزر میں چلتا ہے، لہذا کوئی سرور شامل نہیں ہے اور کوئی ڈیٹا اپ لوڈ نہیں ہوتا ہے۔ یہ عمل کو تیز کرتا ہے اور صارف کے ڈیٹا کو نجی رکھتا ہے۔
عملی استعمال کے لیے اہم نوٹ
انوائس جنریٹر جیسا ٹول بناتے وقت، لے آؤٹ کنٹرول خود منطق سے زیادہ اہم ہوتا ہے۔
براؤزر میں لچکدار لے آؤٹ ہوتے ہیں۔ لیکن پی ڈی ایف میں ہر چیز کو رییکٹ کیا جاتا ہے۔ اس کا مطلب ہے کہ وقفہ کاری، پوزیشننگ، اور معقولیت کو احتیاط سے کنٹرول کیا جانا چاہیے۔
مثال کے طور پر، ان کے وقفہ کو ایڈجسٹ کیے بغیر متعدد سیکشنز کو شامل کرنے سے مواد آسانی سے اوورلیپنگ ہو سکتا ہے۔ ایک مقررہ پوزیشن استعمال کرنے کے بجائے، آپ کے مواد کے بڑھتے ہی Y پوزیشن کو متحرک طور پر اپ ڈیٹ کرنے پر غور کریں۔
let y = 20;
doc.text("Invoice Title", 10, y);
y += 10;
doc.text("Customer Name", 10, y);
y += 10;
یہ یقینی بناتا ہے کہ ہر سیکشن اوور لیپنگ کے بجائے پچھلے حصے کے نیچے ظاہر ہوتا ہے۔
ایک اور عام مسئلہ طویل مواد ہے۔ اگر متن بہت لمبا ہے، تو یہ خود بخود HTML کی طرح لپیٹ نہیں جائے گا۔ آپ کو متحرک چوڑائیوں کا استعمال کرتے ہوئے اسے دستی طور پر ہینڈل کرنا پڑے گا۔
const pageWidth = doc.internal.pageSize.getWidth();
const margin = 10;
const maxWidth = pageWidth - margin * 2;
const lines = doc.splitTextToSize(content, maxWidth);
doc.text(lines, margin, y);
const lineHeight = doc.getLineHeight() / doc.internal.scaleFactor;
y += lines.length * lineHeight;
اس سے متن کو پڑھنے کے قابل رکھنے اور یہ یقینی بنانے میں مدد ملے گی کہ یہ صفحہ پر فٹ بیٹھتا ہے۔
آپ کو یہ بھی سوچنا چاہیے کہ اسکرین ان پٹ کا فکسڈ سائز دستاویزات میں ترجمہ کیسے کیا جاتا ہے۔ مثال کے طور پر، ٹیکسٹ ایریا میں ایک لمبی تفصیل اسکرین پر ٹھیک لگ سکتی ہے، لیکن پی ڈی ایف میں اس کے لیے مناسب وقفہ، لائن بریک، اور بعض اوقات صفحہ بندی کی بھی ضرورت ہوتی ہے۔
پی ڈی ایف تخلیق کی کارکردگی کو بہتر بنائیں
کارکردگی ایک اور اہم عنصر ہے۔ بہت سارے مواد کے ساتھ بڑی پی ڈی ایف بنانے کے نتیجے میں براؤزرز میں رینڈرنگ سست ہو سکتی ہے۔
ایک آسان طریقہ ان پٹ سائز کو محدود کرنا ہے۔
if (content.length > 2000) {
alert("Content is too large. Consider splitting it into multiple sections.");
return;
}
ایک اور نقطہ نظر یہ ہے کہ ہر چیز کو ایک صفحے پر مجبور کرنے کے بجائے اپنے مواد کو متعدد صفحات میں تقسیم کریں۔
const pageHeight = doc.internal.pageSize.getHeight();
const lineHeight = doc.getLineHeight() / doc.internal.scaleFactor;
lines.forEach((line) => {
if (y > pageHeight - margin) {
doc.addPage();
y = margin;
}
doc.text(line, margin, y);
y += lineHeight;
});
یہ آپ کو لے آؤٹ یا کارکردگی پر سمجھوتہ کیے بغیر بڑی مقدار میں مواد پر مؤثر طریقے سے کارروائی کرنے کی اجازت دیتا ہے۔
حقیقی ٹولز میں، چھوٹے فیصلے جیسے وقفہ کاری، لائن بریک، صفحہ بندی، اور مواد کی حدیں جنریٹ کی گئی پی ڈی ایف کے استعمال اور پیشہ ورانہ مہارت میں بڑا فرق ڈالتی ہیں۔
سے بچنے کے لئے عام غلطیاں
ایک عام مسئلہ توثیق کو چھوڑنا ہے۔ اگر کوئی صارف خالی فیلڈز کے ساتھ پی ڈی ایف بناتا ہے، تو نتائج کارآمد نہیں ہوں گے۔
اس سے بچنے کے لیے، ہمیشہ ان پٹ کو درست طریقے سے درست کریں اور وائٹ اسپیس کو ہینڈل کریں۔
if (!title.trim() && !content.trim()) {
alert("Please enter valid content before generating the PDF.");
return;
}
یہ صارفین کو خالی یا کرپٹ پی ڈی ایف ڈاؤن لوڈ کرنے سے روک دے گا۔
ایک اور غلطی ٹیکسٹ اوور فلو کو نظر انداز کرنا ہے۔ متن براؤزرز میں خود بخود لپیٹ جاتا ہے، لیکن پی ڈی ایف میں نہیں۔ اگر آپ اس کا خیال نہیں رکھتے ہیں تو طویل مواد اوورلیپ ہو سکتا ہے یا صفحہ سے باہر جا سکتا ہے۔
آپ ڈائنامک ٹیکسٹ ریپنگ کا استعمال کرکے اس مسئلے کو حل کرسکتے ہیں۔
const pageWidth = doc.internal.pageSize.getWidth();
const margin = 10;
const maxWidth = pageWidth - margin * 2;
const lines = doc.splitTextToSize(content, maxWidth);
doc.text(lines, margin, 40);
یہ صفحہ کے اندر موجود مواد کو محفوظ رکھتا ہے اور پڑھنے کی اہلیت کو بہتر بناتا ہے۔
ایک متعلقہ مسئلہ یہ ہے کہ فکسڈ پوزیشننگ مواد کو اوورلیپ کرنے کا سبب بنتی ہے۔ ہر چیز کو جامد نقاط میں رکھنا سیکشنز کو ایک دوسرے کے اوپر ڈھیر کرنے دیتا ہے۔
اس کے بجائے، اپنے مقام کو متحرک طور پر اپ ڈیٹ کریں۔
let y = 20;
doc.text(title, 10, y);
y += 10;
const lines = doc.splitTextToSize(content, maxWidth);
doc.text(lines, 10, y);
const lineHeight = doc.getLineHeight() / doc.internal.scaleFactor;
y += lines.length * lineHeight;
اس سے وقفہ کاری کو مستقل رکھنے اور ترتیب کے مسائل سے بچنے میں مدد ملے گی۔
آخر میں، اگر آپ jsPDF لائبریری کو صحیح طریقے سے لوڈ کرنا بھول جاتے ہیں، تو پوری فعالیت ٹوٹ جائے گی۔ اگر اسکرپٹ غائب ہے یا غلط ہے تو پی ڈی ایف بالکل بھی نہیں بنے گی۔
ہمیشہ یقینی بنائیں کہ آپ کا CDN صحیح طریقے سے شامل ہے۔
حقیقت میں، زیادہ تر مسائل مناسب توثیق، متحرک وقفہ کاری کی درست ہینڈلنگ، اور مواد کے سائز پر آتے ہیں۔ ان مسائل کو جلد حل کرنے سے آپ کا پی ڈی ایف جنریٹر زیادہ قابل اعتماد ہو جائے گا۔
ڈیمو: پی ڈی ایف جنریٹر کیسے کام کرتا ہے۔
اس مثال میں، ہم یہ ظاہر کرنے کے لیے ایک سادہ انوائس PDF بنائیں گے کہ یہ حقیقی دنیا کے منظر نامے میں کیسے کام کرتا ہے۔
مرحلہ 1: اپنی کمپنی کی تفصیلات درج کریں۔
اپنی کمپنی کی تفصیلات جیسے نام، پتہ، رابطے کی معلومات، اور دیگر شناخت کنندگان درج کرکے شروع کریں۔ یہ ڈیٹا تیار کردہ انوائس کے اوپری حصے میں ظاہر ہوتا ہے۔
مرحلہ 2: کسٹمر کی معلومات شامل کریں۔
اگلا، اپنے کسٹمر کی تفصیلات درج کریں، بشمول بلنگ اور شپنگ پتے۔ یہ یقینی بنائے گا کہ آپ کی رسیدیں صحیح طریقے سے تفویض کی گئی ہیں۔
مرحلہ 3: انوائس کی تفصیلات درج کریں۔
انوائس کی مخصوص تفصیلات فراہم کریں، بشمول انوائس نمبر، تاریخ، اور اضافی نوٹ۔ یہ اقدار آپ کی دستاویز کو مناسب طریقے سے ترتیب دینے میں آپ کی مدد کریں گی۔
مرحلہ 4: انوائس میں آئٹمز شامل کریں۔
انوائس میں شامل اشیاء یا خدمات شامل کریں۔ ہر آئٹم کی مقدار، قیمت، ٹیکس، اور رعایت کا خود بخود حساب لگایا جا سکتا ہے۔
مرحلہ 5: ادائیگی اور شرائط کو ترتیب دیں۔
ادائیگی کی ہدایات، شرائط اور اضافی شرائط کی وضاحت کرتا ہے۔ یہ سیکشن اس بات کو یقینی بناتا ہے کہ آپ کی رسید مکمل اور پیداوار کے لیے تیار ہے۔
مرحلہ 6: تیار کردہ انوائس کا جائزہ لیں۔
انٹرفیس آپ کے انوائس کا لائیو پیش نظارہ فراہم کرتا ہے تاکہ آپ پی ڈی ایف بنانے سے پہلے ہر چیز کا جائزہ لے سکیں۔
مرحلہ 7: پی ڈی ایف بنائیں اور ڈاؤن لوڈ کریں۔
آخر میں، بنائیں بٹن پر کلک کریں اور آپ کی پی ڈی ایف فوری طور پر بن جائے گی اور ڈاؤن لوڈ ہو جائے گی۔ فائلیں بغیر کسی سرور کے تعامل کے براہ راست براؤزر میں بنائی جاتی ہیں۔
نتیجہ
اس ٹیوٹوریل میں، ہم نے جاوا اسکرپٹ کا استعمال کرتے ہوئے ایک پی ڈی ایف جنریٹر بنایا ہے جو مکمل طور پر براؤزر میں چلتا ہے۔
زیادہ اہم بات یہ ہے کہ میں نے کلائنٹ سائڈ فعالیت کا استعمال کرتے ہوئے حقیقی ٹولز بنانے کا طریقہ سیکھا۔ یہ نقطہ نظر پیچیدگی کو کم کرتا ہے، کارکردگی کو بہتر بناتا ہے، اور صارف کے ڈیٹا کو نجی رکھتا ہے۔
ایک بار جب آپ اس پیٹرن کو سمجھ لیتے ہیں، تو آپ اسے جدید ٹولز جیسے کہ انوائسنگ سسٹم، رپورٹ جنریٹرز، اور دستاویز کی برآمدات تک بڑھا سکتے ہیں۔
اور یہیں سے چیزیں واقعی دلچسپ ہونے لگتی ہیں۔