jsPDF rất tốt cho browser exports nhẹ
jsPDF phổ biến vì giải quyết một vấn đề sản phẩm thật: tạo PDF ngay trong browser mà không cần chạy backend service. Developer có thể vẽ text, lines, images và bảng đơn giản, rồi trigger download từ chính page đó. Với prototypes, admin screens nhỏ, biên nhận local và offline PWA, đây là fit mạnh.
Câu hỏi sản phẩm là ranh giới browser đó dừng đúng ở đâu. Khi PDF trở thành business document mà khách hàng scan, archive, email hoặc nộp sang hệ thống khác, công việc không còn chỉ là “vẽ một file”. Nó trở thành font management, barcode accuracy, mobile stability, deterministic output và đôi khi PDF/A hoặc e-invoice packaging.
Cùng PDF output, ranh giới sản phẩm khác nhau
Với jsPDF, frontend application của bạn là renderer. Mỗi browser tab phải giữ library, custom fonts, intermediate images, barcode output và final PDF bytes. Điều đó giữ library bill bằng 0, nhưng chuyển production responsibility lên từng thiết bị người dùng.
Với gPdf, browser hoặc backend gửi structured DocumentRequest hoặc template_id + data. gPdf sở hữu render environment, bundled fonts, barcode geometry và binary PDF generation tại edge. Application vẫn chịu trách nhiệm về data và template logic, không phải PDF engine.
Độ khớp sản phẩm: offline export hay operational documents
Chọn jsPDF khi PDF là tính năng tiện ích local: một export button nhỏ, biên nhận Latin-only đơn giản, dashboard snapshot hoặc PWA phải hoạt động khi không có network.
Chọn gPdf khi PDF là một phần của operational quy trình: shipping labels, warehouse tags, invoices, tickets, statements, customs forms và cross-border receipts. Các tài liệu này cần cùng output trên mọi thiết bị, không phải bất cứ thứ gì tab browser hiện tại có thể assemble an toàn.
Mô hình chi phí: library miễn phí vs production surface tự sở hữu
jsPDF có lợi thế giá rõ ràng: library open source và browser CPU không phải line item trên cloud bill. Với một internal feature nhỏ, đó có thể là phương án rẻ nhất.
Production cost nằm trong phần việc xung quanh library:
- CJK-capable font files hoặc generated base64 font modules.
- Barcode encoding và conversion libraries.
- Memory và download bugs theo từng browser.
- Print QA cho scanners và thermal printers.
- Regression tests trên desktop, iOS Safari, Android WebView và embedded browsers.
gPdf biến phần đó thành usage bill. Gói Basic công khai bắt đầu 5 USD/tháng cho 100.000 trang, với standard overage từ 0,00005 USD/trang. Đây là vendor cost, nhưng loại bỏ nhu cầu biến mọi frontend bundle và mọi thiết bị người dùng thành production PDF service.
Chi phí CJK không chỉ là dung lượng file
Hard edge đầu tiên là CJK text: Chinese, Japanese và Korean.
Built-in standard PDF fonts của jsPDF hữu ích cho Latin output đơn giản, nhưng không bao phủ mọi Unicode glyph. Khi tài liệu có CJK text, application cần font thật sự chứa các glyph đó. Trên thực tế, browser-side implementations thường package TTF file, convert nó thành base64 JavaScript module hoặc fetch font data trước khi generate PDF.
Chi phí đó được trả hai lần: trước hết là frontend payload lớn hơn, rồi thêm lần nữa là browser memory khi PDF được generate. Trên mobile, cùng một tab có thể giữ web app, font, barcode buffers, images và final PDF bytes cùng lúc.
gPdf giữ phần việc đó ở server-side. Browser gửi structured JSON; renderer chọn từ bundled fonts bao phủ Latin, Greek, Cyrillic, CJK, Arabic, Devanagari, Bengali, Thai và monospace text. Một order payload 2 KB không cần biến thành delivery path cho font 12 MB.
Chi phí barcode: encoding dễ, độ tin cậy khi in mới khó
Trong logistics, ecommerce, manufacturing, healthcare, ticketing và retail quy trình, barcode có thể quan trọng hơn phần chữ nhìn thấy. Con người đọc order number; operation đọc Code 128, GS1-128, QR, DataMatrix hoặc PDF417.
Với jsPDF, barcode generation thường là quyết định sản phẩm riêng. Teams ghép jsPDF với encoder khác, render barcode thành SVG, canvas hoặc image, rồi đặt kết quả vào PDF. Cách này ổn cho coupon QR code hoặc proof of concept.
Nó trở nên mong manh khi barcode in ra là điểm vận hành critical:
- Canvas barcode có thể bị rasterize ở resolution sai.
- Scaled image có thể làm mờ bars, modules hoặc quiet zones.
- Browser, CSS transform hoặc export path có thể đổi final physical size.
- Barcode formats khác nhau có thể cần libraries hoặc conversion paths khác nhau.
- Thermal printers 203 DPI nhanh chóng phơi bày lỗi sizing nhỏ.
gPdf xử lý barcode như document element. Request nói type: "barcode", format, payload và physical size bằng millimetres. Renderer phát ra vector barcode geometry bên trong PDF cho các định dạng 1D và 2D được support, để text, shapes, tables, images và barcodes ở trong cùng coordinate system.
Studio và template iteration
jsPDF là code-first. Layout change thường nghĩa là sửa drawing commands, positions, font registration, image conversion và barcode placement trong JavaScript.
gPdf hỗ trợ cùng API-first workflow, nhưng thêm gPdf Studio như visual designer miễn phí cho PDF layout. Nhóm có thể thêm và kéo thả text, images, tables, shapes, headers, footers và barcodes, rồi nối design với template_id + data generation. Điều này quan trọng khi format label, invoice hoặc receipt đổi thường xuyên và người không chuyên PDF cũng cần tham gia layout.
Mobile browsers không phải nơi phù hợp cho PDF nặng
Client-side PDF generation nghe có vẻ rẻ vì server bill bằng 0. Chi phí được chuyển sang thiết bị người dùng.
Trên desktop, điều đó có thể ổn. Trên mobile browsers, tài liệu production có thể ép tab rất mạnh: CJK font data, base64 images, canvas buffers, barcode images, generated PDF bytes và application đang chạy đều tranh memory cùng lúc. iOS Safari và Android thiết bị ít memory kém khoan dung hơn laptop của developer.
Chuyển generation sang gPdf làm thay đổi hình dạng vấn đề. Browser tạo JSON request nhỏ, đợi binary response và download PDF hoàn chỉnh. Tab của user không còn phải đồng thời là font manager, barcode renderer, layout engine và binary PDF writer.
Khi jsPDF vẫn là lựa chọn đúng
Có nhiều lý do mạnh để giữ jsPDF.
Nếu user phải export khi offline, jsPDF phù hợp hơn. Nếu data hoàn toàn không được rời thiết bị, browser-side generation là ranh giới privacy sạch hơn. Nếu tài liệu nhỏ, Latin-only và thỉnh thoảng mới dùng, operational cost của việc đưa thêm API vào có thể không đáng. Với prototypes và internal tools, jsPDF thường đúng là đường nhanh nhất.
Quyết định thay đổi khi output là một phần của operational quy trình: shipping label phải scan được, invoice phải archive, ticket phải verify hoặc cross-border order document phải render đúng CJK names. Lúc đó, “generate PDF trong browser” kém quan trọng hơn “generate cùng production PDF một cách đáng tin cậy”.
Hình dạng migration
Migration không phải “thay một function call”. Đó là chuyển từ imperative browser drawing sang 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();Thay đổi quan trọng là trách nhiệm sở hữu. Với jsPDF, web app sở hữu CJK font path, barcode generation path, browser memory profile và export behaviour. Với gPdf, application sở hữu data và template; edge renderer sở hữu document mechanics.
Các kịch bản PDF generation liên quan
Nếu bạn đang cân nhắc PDF nên được tạo trong browser hay trong service có kiểm soát, hãy xem thêm JSON to PDF API, invoice PDF generation, shipping label PDF generation, GS1 barcode API, PDF/A API và Factur-X API.
FAQ
jsPDF có miễn phí không?
Bản thân library là open source. Production cost là phần việc xung quanh: CJK fonts, barcode libraries, browser QA, print QA và support cho thiết bị hết memory.
gPdf có thay thế mọi use case của jsPDF không?
Không. Offline browser export và local-only documents vẫn là lãnh thổ tự nhiên của jsPDF. gPdf dành cho tài liệu production nơi renderer có kiểm soát xứng đáng với một API call.
Vì sao nói riêng về chi phí barcode?
Vì barcode nhìn ổn trên màn hình vẫn có thể fail sau scaling, rasterization hoặc thermal printing. Operational documents cần scanner reliability, không chỉ pattern nhìn thấy được.
Xem thêm
- gPdf API reference — DocumentRequest, barcode elements, font fallback và render endpoints.
- GS1 barcode API — GS1-128, barcode geometry và quy trình nhãn vận chuyển.
- PDF/A API — khi yêu cầu archival đi vào PDF pipeline.
- Factur-X API — khi e-invoice packaging trở thành yêu cầu.