Lightweight browser export-এ jsPDF চমৎকার
jsPDF জনপ্রিয় কারণ এটি বাস্তব product problem সমাধান করে: backend service ছাড়া browser-এর ভেতর PDF তৈরি করা। Developer text, line, image ও simple table draw করে একই page থেকে download trigger করতে পারে। Prototype, ছোট admin screen, local receipt এবং offline PWA-এর জন্য এটি শক্তিশালী fit।
প্রশ্ন হলো browser boundary কোথায় ভুল boundary হয়ে যায়। PDF যদি customer scan করবে, archive করবে, email করবে বা অন্য system-এ submit করবে এমন business document হয়, কাজ তখন শুধু “file draw” নয়। তখন font management, barcode accuracy, mobile stability, deterministic output এবং কখনো PDF/A বা e-invoice packaging দরকার হয়।
Same PDF output, কিন্তু পণ্যসীমা আলাদা
jsPDF-তে frontend application-ই renderer। প্রতিটি browser tab-কে library, custom font, intermediate image, barcode output এবং final PDF bytes ধরে রাখতে হয়। Library bill zero থাকে, কিন্তু production responsibility প্রতিটি user device-এ চলে যায়।
gPdf-তে browser বা backend structured DocumentRequest অথবা template_id + data পাঠায়। Render environment, bundled font, barcode geometry এবং binary PDF generation edge-এ gPdf own করে। Application data ও template logic own করে, PDF engine নয়।
কোন কাজে মানায়: offline export বনাম operational document
PDF যদি local convenience feature হয়, jsPDF বেছে নিন: ছোট export button, simple Latin-only receipt, dashboard snapshot, অথবা network ছাড়াও চলতে হবে এমন PWA।
PDF যদি operational কাজের ধারার অংশ হয়, gPdf বেছে নিন: shipping label, warehouse tag, invoice, ticket, statement, customs form এবং cross-border receipt। এসব document-এ deviceভেদে best-effort output নয়, একই output দরকার।
খরচের মডেল: free library বনাম production surface নিজে সামলানো
jsPDF-এর obvious price advantage আছে: library open source, এবং browser CPU cloud bill-এ line item নয়। ছোট internal feature-এর জন্য এটি সস্তা পথ হতে পারে।
Production cost library-এর চারপাশে আসে:
- CJK-capable font file বা generated base64 font module.
- Barcode encoding ও conversion library.
- Browser-specific memory ও download bug.
- Scanner ও thermal printer-এর জন্য print QA.
- Desktop, iOS Safari, Android WebView ও embedded browser-এ regression test.
gPdf এটিকে usage bill-এ রূপ দেয়। Public Basic plan মাসে ৫ USD-তে ১ লাখ পৃষ্ঠা দেয়, standard overage প্রতি পৃষ্ঠা ০.০০০০৫ USD থেকে শুরু। এটি vendor cost, কিন্তু প্রতিটি frontend bundle ও user device-কে production PDF service বানানোর দরকার সরিয়ে দেয়।
CJK cost শুধু file size নয়
প্রথম hard edge হলো CJK text: Chinese, Japanese ও Korean।
jsPDF-এর built-in standard PDF font simple Latin output-এর জন্য কাজের, কিন্তু সব Unicode glyph cover করে না। CJK text থাকলে application-কে এমন font দিতে হয় যাতে glyph আছে। বাস্তবে browser-side implementation প্রায়ই TTF package করে, base64 JavaScript module বানায়, বা PDF তৈরি করার আগে font data fetch করে।
এই cost দুবার দেওয়া হয়: প্রথমে larger frontend payload, তারপর PDF generation-এর সময় browser memory। Mobile-এ একই tab web app, font, barcode buffer, image এবং final PDF bytes একসঙ্গে ধরে রাখতে পারে।
gPdf কাজটি server-side রাখে। Browser structured JSON পাঠায়; renderer bundled font দিয়ে Latin, Greek, Cyrillic, CJK, Arabic, Devanagari, Bengali, Thai ও monospace text handle করে। 2 KB order payload-কে 12 MB font delivery path বানাতে হয় না।
Barcode cost: encoding সহজ, print reliability কঠিন
Logistics, ecommerce, manufacturing, healthcare, ticketing ও retail কাজের ধারায় barcode visible copy থেকেও বেশি গুরুত্বপূর্ণ হতে পারে। মানুষ order number পড়ে; operation পড়ে Code 128, GS1-128, QR, DataMatrix বা PDF417।
jsPDF-এর সঙ্গে barcode generation সাধারণত আলাদা product decision। Team jsPDF-এর সঙ্গে encoder মিলিয়ে barcode-কে SVG, canvas বা image বানায়, তারপর PDF-এ বসায়। Coupon QR code বা proof of concept-এ এটি চলে।
Operationally critical printed barcode হলে fragility আসে:
- Canvas barcode ভুল resolution-এ rasterize হতে পারে।
- Scaled image bars, modules বা quiet zones blur করতে পারে।
- Browser, CSS transform বা export path final physical size বদলাতে পারে।
- আলাদা barcode format-এর জন্য আলাদা library বা conversion path দরকার হতে পারে।
- 203 DPI thermal printer ছোট sizing mistake দ্রুত দেখায়।
gPdf barcode-কে document element হিসেবে দেখে। Request-এ type: "barcode", format, payload এবং millimetres-এ physical size থাকে। Renderer supported 1D ও 2D format-এর জন্য PDF-এর ভিতরে vector barcode geometry emit করে, তাই text, shape, table, image ও barcode একই coordinate system-এ থাকে।
Studio ও template iteration
jsPDF code-first। Layout change মানে JavaScript drawing command, position, font registration, image conversion ও barcode placement বদলানো।
gPdf একই API-first কাজের ধারা রাখে, কিন্তু gPdf Studio free visual PDF designer হিসেবে যোগ করে। Team text, image, table, shape, header, footer ও barcode add/drag করতে পারে, তারপর design-কে template_id + data generation-এর সঙ্গে যুক্ত করতে পারে। Label, invoice বা receipt format ঘন ঘন বদলালে এবং PDF specialist নয় এমন মানুষকেও layout-এ অংশ নিতে হলে এটি গুরুত্বপূর্ণ।
Mobile browser heavy PDF work-এর জন্য ভুল জায়গা
Client-side PDF generation cheap মনে হয় কারণ server bill zero। Cost user device-এ যায়।
Desktop-এ এটি ঠিক থাকতে পারে। Mobile browser-এ production document tab-কে চাপ দিতে পারে: CJK font data, base64 image, canvas buffer, barcode image, generated PDF bytes এবং running application একসঙ্গে memory চায়। iOS Safari ও low-memory Android device developer laptop-এর মতো forgiving নয়।
gPdf-তে generation সরালে problem shape বদলে যায়। Browser ছোট JSON request বানায়, binary response অপেক্ষা করে এবং finished PDF download করে। User tab আর font manager, barcode renderer, layout engine ও binary PDF writer নয়।
কখন jsPDF এখনো সঠিক পছন্দ
jsPDF রাখার ভালো কারণ আছে।
User-কে offline export করতেই হলে jsPDF ভালো fit। Data device ছাড়তে না পারলে browser-side generation পরিষ্কার privacy boundary। Document ছোট, Latin-only ও occasional হলে API introduce করার operational cost worth নাও হতে পারে। Prototype ও internal tool-এ jsPDF প্রায়ই দ্রুততম পথ।
Decision বদলায় যখন output operational কাজের ধারার অংশ: scan হওয়া shipping label, archive হওয়া invoice, verify হওয়া ticket, বা CJK name ঠিকমতো render করতে হবে এমন cross-border order document। তখন “browser-এ PDF বানানো” নয়, “same production PDF reliably বানানো” বেশি গুরুত্বপূর্ণ।
মাইগ্রেশনের রূপ
Migration শুধু একটি function call বদলানো নয়। এটি imperative browser drawing থেকে structured document request-এ যাওয়া।
- // Before: browser-side drawing with jsPDF plus extra font/barcode setup.
- import { jsPDF } from "jspdf";
- import JsBarcode from "jsbarcode";
-
- const doc = new jsPDF({ unit: "mm", format: [100, 150] });
-
- // Load a CJK-capable TTF and register it before drawing CJK text.
- doc.addFileToVFS("NotoSansCJK-Regular.ttf", base64Font);
- doc.addFont("NotoSansCJK-Regular.ttf", "NotoSansCJK", "normal");
- doc.setFont("NotoSansCJK");
- doc.text("跨境订单 / Cross-border order", 6, 10);
-
- // Generate a barcode separately, then place it into the PDF.
- JsBarcode(canvas, "PDN0003507278", { format: "CODE128" });
- doc.addImage(canvas.toDataURL("image/png"), "PNG", 6, 72, 72, 20);
- doc.save("label.pdf");
+
+ // After: send one structured DocumentRequest to gPdf.
+ const res = await fetch("https://api.gpdf.com/api/v1/pdf/render", {
+ method: "POST",
+ headers: {
+ Authorization: `Bearer ${KEY}`,
+ "Content-Type": "application/json"
+ },
+ body: JSON.stringify({
+ settings: {
+ defaults: {
+ text: {
+ font_family: "NotoSans-Regular",
+ font_mode: "prefer",
+ font_size: 9,
+ color: "#111827"
+ }
+ }
+ },
+ pages: [{
+ width: 100,
+ height: 150,
+ elements: [
+ {
+ type: "text",
+ x: 6,
+ y: 8,
+ content: "跨境订单 / Cross-border order",
+ style: { width: 88, font_size: 12, font_weight: "bold" }
+ },
+ {
+ type: "barcode",
+ x: 6,
+ y: 70,
+ width: 72,
+ height: 18,
+ format: "code128",
+ content: "PDN0003507278",
+ barcode_text: { enabled: true, position: "bottom", offset: 1 }
+ },
+ {
+ type: "barcode",
+ x: 80,
+ y: 8,
+ width: 14,
+ height: 14,
+ format: "qrcode",
+ content: "https://track.example/PDN0003507278",
+ barcode_text: { enabled: false, position: "bottom" }
+ }
+ ]
+ }]
+ })
+ });
+ const pdf = await res.arrayBuffer();মূল shift হলো ownership। jsPDF-তে web app CJK font path, barcode generation path, browser memory profile ও export behaviour own করে। gPdf-তে application data ও template own করে; edge renderer document mechanics own করে।
সম্পর্কিত PDF তৈরির ব্যবহারক্ষেত্র
jsPDF ও gPdf তুলনা করলে প্রথমে boundary ঠিক করুন: browser-এর ভিতরে offline export দরকার, নাকি production document service দরকার? CJK font, barcode ও mobile memory সমস্যা বড় হলে JSON to PDF API দেখুন। Operational workload হলে invoice PDF, shipping label ও GS1 barcode API আলাদা করে তুলনা করুন। Archive বা e-invoice দরকার হলে PDF/A API ও Factur-X API jsPDF-এর browser boundary থেকে আলাদা সিদ্ধান্তে নিয়ে যায়।
FAQ
jsPDF কি free?
Library open source। Production cost হলো surrounding work: CJK font, barcode library, browser QA, print QA এবং memory শেষ হয়ে যাওয়া device support।
gPdf কি সব jsPDF use case replace করে?
না। Offline browser export ও local-only document এখনো jsPDF-এর natural territory। gPdf production document-এর জন্য, যেখানে controlled renderer API call-এর মূল্য আছে।
Barcode cost আলাদা করে বলা কেন?
কারণ barcode screen-এ ঠিক দেখালেও scaling, rasterization বা thermal printing-এর পর fail করতে পারে। Operational document-এ visible pattern নয়, scanner reliability দরকার।
আরও পড়ুন
- gPdf API reference -
DocumentRequest, barcode elements, font fallback ও render endpoints. - PDFs-এ vector বনাম raster barcodes - printing-এর পরে barcode geometry কেন গুরুত্বপূর্ণ।
- GS1 barcode API - GS1-128, SSCC, GTIN এবং label-oriented barcode sizing details.
- Engineers-এর জন্য PDF/A ও Factur-X - archive ও e-invoice requirements কখন PDF pipeline-এ আসে।