Hướng dẫn pdfkit from file nodejs - pdfkit từ tệp nodejs
|
Tôi có một trang mẫu chi tiết khách hàng trong đó khách hàng sẽ nhập chi tiết của anh ấy/cô ấy và nhấp vào nút Gửi. Sau khi nhấp vào, dữ liệu được gửi trong MongoDB bằng Node.js. Bây giờ tôi muốn tạo tệp PDF của dữ liệu đã nhập cùng lúc khi nhấp vào nút Gửi. Show Bất cứ ai cũng có thể gợi ý cho tôi cách tạo tệp pdf khi nhấp vào nút. Hỏi ngày 12 tháng 7 năm 2016 lúc 4:48Jul 12, 2016 at 4:48Jul 12, 2016 at 4:48  Saurabh Sharmasaurabh SharmaSaurabh SharmaSaurabh Sharma 7864 Huy hiệu vàng13 Huy hiệu bạc40 Huy hiệu đồng4 gold badges13 silver badges40 bronze badges4 gold badges13 silver badges40 bronze badges 2 Bạn có thể sử dụng pdfkit nếu bạn muốn tự tạo định dạng hoặc nút-html-pdf nếu bạn chỉ cần chuyển đổi HTML của mình thành PDF Đã trả lời ngày 12 tháng 7 năm 2016 lúc 5:03Jul 12, 2016 at 5:03Jul 12, 2016 at 5:03 4
Rất nhiều ứng dụng web Node.js yêu cầu tạo PDF động. Khi nghiên cứu các giải pháp có thể, các nhà phát triển thường vấp ngã trên PDFKIT, thư viện thế hệ PDF JavaScript cho Node.js và trình duyệt. Trong hướng dẫn này, bạn sẽ khám phá cách sử dụng pdfkit để tạo hóa đơn PDF với cả dữ liệu tĩnh và động trong ứng dụng Node.js của bạn. Nếu bạn muốn bỏ qua trực tiếp giải pháp, bạn có thể xem ví dụ hoàn chỉnh trên GitHub. Bắt đầuTrước khi bắt đầu, hãy bắt đầu gói NPM mới và thu hút các phụ thuộc cần thiết cho dự án: mkdir pdfkit-invoice cd pdfkit-invoice npm init -y npm install --save pdfkit Bây giờ bạn đã sẵn sàng để bắt đầu tạo hóa đơn đầu tiên của bạn. Mô hình dữ liệuĐể làm cho bộ tạo hóa đơn của bạn có thể tái sử dụng, hãy thiết kế một mô hình dữ liệu đơn giản dưới dạng đối tượng JavaScript. Mô hình này sẽ chứa tất cả các thông tin cần thiết để tạo hóa đơn. Ở đây, một ví dụ về cách một đối tượng hóa đơn như vậy có thể trông: // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, }; Trong đối tượng trên, có một khóa // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };5 chứa tất cả các thông tin vận chuyển để in trên hóa đơn. Khóa // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };6 chứa một mảng tất cả các mục bạn muốn in trên hóa đơn (____10 là tổng cho tất cả các phần của mặt hàng này tính bằng xu). Khóa // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };1 chứa tổng của tất cả các mục tính bằng xu và trường // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };2 cho phép bạn chỉ định số tiền đã được trả cho hóa đơn này. // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };3 được sử dụng để xác định hóa đơn. Tạo hóa đơn PDFVới mô hình dữ liệu này, giờ đây bạn đã sẵn sàng để tạo tệp PDF. Bắt đầu bằng cách tạo hàm, // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };4, sử dụng đối tượng // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };5 để tạo hóa đơn PDF hợp lệ và sau đó lưu nó vào một tệp nằm ở // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };6. Hóa đơn của bạn sẽ bao gồm bốn phần trực quan:
Để tạo một tài liệu PDF trống, hãy sử dụng hàm tạo // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };7 của // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };8. Sau đó tạo các phương thức sơ khai cho bốn phần ở trên. Hiện tại, bắt đầu với việc tạo tiêu đề và chân trang của hóa đơn: // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };0 Vì bạn sử dụng Node.js, trước tiên hãy xuất hàm // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };9 từ tệp // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };00 và nhập nó vào tệp // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };01: // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };4 Thêm dữ liệu tĩnh vào pdfBây giờ bạn có một trang PDF trống, đó là thời gian để điền vào nó với nhiều thông tin hơn. Bắt đầu với hai phần tĩnh, // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };02 và // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };03. API của // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };04 yêu cầu bạn chuỗi tất cả các lệnh vẽ trên thể hiện // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };7. Hình ảnh có thể được tải bằng phương pháp // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };06: // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };0 Hàm // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };07 tải một tệp hình ảnh được gọi là // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };08. Hãy chắc chắn để thêm tệp này vào thư mục dự án của bạn. Bạn có thể sử dụng hình ảnh demo của chúng tôi làm ví dụ. Các phương thức // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };06 và // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };40 lấy // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };41 và // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };42 như đối số thứ hai và thứ ba, tương ứng. Sử dụng các tọa độ đó để bố trí văn bản theo cách bạn muốn. Chạy tập lệnh Node.js từ thiết bị đầu cuối của bạn bằng cách nhập // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };43. Điều này sẽ tạo ra PDF ở trên. Nhưng bây giờ bạn cần thêm dữ liệu động vào nó! Thêm dữ liệu động vào pdfĐể thêm các bit động vào pdf của bạn, bạn sẽ dựa vào mô hình dữ liệu được phác thảo trước đó. Bắt đầu với phần Thông tin khách hàng. Ở đây, bạn muốn in địa chỉ của khách hàng, điều mà bạn có thể làm bằng cách kết hợp các giá trị động vào các lệnh kết xuất PDF: // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };8 Khối mã ở trên sử dụng bố cục đơn giản hóa. Để biết ví dụ hoàn chỉnh, hãy xem mã ví dụ trên GitHub. Đối với bảng, bạn sẽ sử dụng hàm trợ giúp vẽ một hàng của cột. Sau đó, bạn có thể lặp lại tất cả các mục trong mô hình hóa đơn của mình và tạo các hàng bảng cho chúng. Để đảm bảo người trợ giúp hiển thị mọi thứ trong một hàng, hãy đặt tọa độ // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };42 làm đối số cho hàm. Mỗi hàng sẽ có năm cột, // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };45 đến // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };46: // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };2 Sử dụng chức năng trợ giúp này để hiển thị một hàng cho mỗi mục dòng: // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };3 Để giữ các ví dụ mã trong bài đăng này ngắn gọn, chúng tôi đã loại bỏ các tiêu đề và chân bàn của bảng, cùng với một số chức năng tiện ích để định dạng tiền tệ và ngày. Bạn có thể thấy mã ví dụ hoàn chỉnh trên GitHub. Trong mọi trường hợp, một khi bạn thêm các tiêu đề và chân trang bảng, bạn sẽ có một hóa đơn đầy đủ được tạo theo yêu cầu bằng cách sử dụng // index.js const invoice = { shipping: { name: 'John Doe', address: '1234 Main Street', city: 'San Francisco', state: 'CA', country: 'US', postal_code: 94111, }, items: [ { item: 'TC 100', description: 'Toner Cartridge', quantity: 2, amount: 6000, }, { item: 'USB_EXT', description: 'USB Cable Extender', quantity: 1, amount: 2000, }, ], subtotal: 8000, paid: 0, invoice_nr: 1234, };8 trong Node.js. Sự kết luậnPDFKIT cho phép chúng tôi tạo các tài liệu PDF trong Node.js và trình duyệt. Nó rất phù hợp cho các tác vụ như tạo hóa đơn PDF động cho máy chủ web của bạn. Trong ví dụ trên, bạn đã tìm hiểu về PDFKIT và sử dụng nó để tạo hóa đơn PDF từ mô hình dữ liệu dựa trên đối tượng đơn giản. Bạn có thể kiểm tra mã nguồn trên GitHub. Nếu bạn muốn hiển thị PDF trong trình xem PDF mạnh mẽ hoặc thêm chức năng nâng cao như Chữ ký kỹ thuật số hoặc Chú thích PDF, chúng tôi khuyên bạn nên triển khai PSPDFKIT được máy chủ hậu vệ của chúng tôi để thử Web. Nếu bạn quan tâm đến việc tự động hóa quy trình tạo PDF, hãy xem SDK thế hệ PDF của chúng tôi hoặc API thế hệ PDF của chúng tôi, cả hai cho phép bạn tạo hóa đơn PDF từ tài liệu HTML. Chúng tôi cũng có một bài đăng trên blog hướng dẫn bạn thông qua việc tạo các tệp PDF từ HTML với Node.js. |
