Hướng dẫn best pdf generator javascript - javascript trình tạo pdf tốt nhất

Question

JavaScript / Mẹo

So sánh các công cụ khác nhau để hoàn thành công việc của bạn.

Giới thiệu

Thương mại điện tử đã trở nên phổ biến hơn trong hai năm qua và đã trở thành một nguồn thu nhập thiết yếu cho nhiều công ty. Một trong những nhu cầu phổ biến nhất là khả năng in bảng điểm hoặc hóa đơn trực tuyến thông qua ứng dụng web của bạn, trong đó chứa dữ liệu động dựa trên hoạt động của người dùng. Một trường hợp sử dụng khác là nhu cầu in nội dung trang web, cho dù bạn có một trang web giáo dục hay

Một yêu cầu rất phổ biến đối với các ứng dụng web là một cách để tạo PDFS và cung cấp chúng để tải xuống. Điều này thường là để sản xuất hóa đơn, vé, hợp đồng bán hàng, báo cáo và các tài liệu khác được cá nhân hóa với dữ liệu khách hàng.

Trong bài viết này, chúng tôi hướng dẫn bạn qua một phương pháp nguồn mở đơn giản: html2pdf.js. HTML2PDF sử dụng thư viện JavaScript được nhúng trong một trang web để tạo các phần của nó có thể tải xuống dưới dạng PDFS. Đối với hướng dẫn này, chúng tôi chỉ ra cách tạo PDFS trong một ứng dụng web từ mẫu HTML.

Chúng tôi cũng khám phá các trường hợp sử dụng và các lựa chọn thay thế HTML2PDF.JS-bao gồm một trình tạo phản ứng từ nguồn mở và khung JavaScript nâng cao PDFTRON, để tạo các tài liệu PDF, không hoạt động, không có máy chủ.

HTML2PDF.JS Các trường hợp sử dụng

Thư viện html2pdf.js dựa trên JavaScript thuần túy để tạo PDF. Do đó, HTML2PDF nhúng phía máy khách trực tiếp, trong trình duyệt. Và không giống như sử dụng chức năng in trình duyệt, HTML2PDF cho phép bạn tạo trải nghiệm tải xuống đích thực cho người dùng của bạn. Nó hoạt động đằng sau giao diện của bạn và có vẻ như là một phần tự nhiên trong ứng dụng web của bạn.

html2pdf.js tốt cho việc tạo tài liệu nhỏ. Nó rất hoàn hảo khi bạn phục vụ một người dùng duy nhất, người chỉ muốn nhấp để tạo một tệp PDF như vé buổi hòa nhạc hoặc thẻ lên máy bay.

html2pdf.js hoạt động tốt cho một số chức năng nhất định:

Tạo và xem các tệp PDF đơn giản với nội dung tĩnh, không thể lựa chọn
Tạo tài liệu từ mẫu HTML/CSS
Thêm chức năng tải xuống-pdf vào ứng dụng web

Cách tạo PDF từ HTML với html2pdf.js

Kết hợp HTML2Canvas và JSPDF, HTML2PDF dựa trên một cách giải quyết đơn giản để bỏ qua các thách thức điển hình liên quan đến việc chuyển đổi HTML thành PDF trong trình duyệt. Đầu tiên, nó sử dụng HTML2Canvas để chuyển đổi HTML của bạn thành một khung vẽ và kết xuất Canvas thành một hình ảnh tĩnh. Sau đó, JSPDF dễ dàng kết thúc hình ảnh mới trong tệp PDF, có thể tải xuống cho người dùng của bạn.

Bắt đầu

Chúng tôi đã cung cấp một mẫu hóa đơn HTML được gõ thủ công để sử dụng với hướng dẫn này, nhưng bạn có thể dễ dàng tạo HTML cho tài liệu của riêng bạn trong một phụ trợ.

Cài đặt

HTML2PDF.JS Cài đặt theo ba cách chính: thông qua HTML, bằng NPM hoặc bằng cách chèn thư viện bằng JavaScript.

HTML

Cách đơn giản nhất để cài đặt html2pdf.js là tải xuống Dist/html2pdf.bundle.min.js vào thư mục dự án của bạn và đưa nó vào HTML của bạn với những điều sau:

NPM

Bạn cũng có thể cài đặt html2pdf.js và các phụ thuộc của nó bằng NPM:

npm install --save html2pdf.js

JavaScript (Bảng điều khiển)

Ngoài ra, nếu bạn trên trang web, bạn có thể sửa đổi trực tiếp và muốn sử dụng html2pdf.js để chụp ảnh màn hình, hãy dán phần sau vào bảng điều khiển:

function addScript(url) {
  const script = document.createElement('script');
  script.type = 'application/javascript';
  script.src = url;
  document.head.appendChild(script);
}
addScript('https://raw.githack.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js');

Cách sử dụng cơ bản

Khi html2pdf.js được cài đặt, bạn có thể sử dụng nó. Mã sau đây lấy và chuyển đổi một lựa chọn HTML, sau đó nhắc người dùng đến Save Save.

const element = document.querySelector('body');
html2pdf(element);

Hóa đơn ví dụ của chúng tôi sau đó hiển thị như vậy khi mở:

Hướng dẫn best pdf generator javascript - javascript trình tạo pdf tốt nhất

Sử dụng nâng cao

Nếu được gọi là không có đối số, html2pdf.js trả về một đối tượng công nhân. Công nhân này lần lượt hỗ trợ một số phương pháp và đối số. Thư viện API dựa trên thư viện cho phép bạn chuỗi các phương thức tuần tự, chèn các bước trung gian của riêng bạn hoặc bỏ qua các bước mà không gặp khó khăn.

Đối với hướng dẫn này, chúng tôi đã giành chiến thắng làm bất cứ điều gì lạ mắt, thay vào đó gắn bó với luồng mặc định:

// This will implicitly create the canvas and PDF objects before saving.
const worker = html2pdf().from(element).save();
// The basic workflow of html2pdf.js tasks (enforced by the prereq system) is:
// .from() -> .toContainer() -> .toCanvas() -> .toImg() -> .toPdf() -> .save()

Tham số tùy chọn

Ngoài ra, html2pdf.js chấp nhận một tham số tùy chọn với các cài đặt để kiểm soát cách tệp PDF cuối cùng hiển thị và cách giải quyết hình ảnh được sử dụng để chuyển đổi.

const element = document.querySelector('body');
const opt = {
  filename: 'myPage.pdf',
  margin: 2,
  image: {type: 'jpeg', quality: 0.9},
  jsPDF: {format: 'letter', orientation: 'portrait'}
};
// New Promise-based usage:
html2pdf().set(opt).from(element).save();
// Old monolithic-style usage:
html2pdf(element, opt);

Ví dụ phá vỡ trang

Cuối cùng, chúng tôi có thể lập trình thêm các lần ngắt trang vào các tệp PDF của chúng tôi để kiểm soát cách phân chia nội dung HTML. Việc ngắt trang có thể được thêm thông qua các kiểu CSS, bộ chọn trên các yếu tố riêng lẻ hoặc tránh (thông qua chế độ Tránh-tất cả).

// Avoid page-breaks on all elements, and add one before #pageX.
html2pdf().set({
  pagebreak: {mode: 'avoid-all', before:'#pageX'}
});
// Adds page-breaks according to the CSS break-before, break-after, and break-inside properties.
// Only recognizes always/left/right for before/after, and avoid for inside.
html2pdf().set({
  pagebreak: {mode: 'css' }
});

Hóa đơn ngắn don don yêu cầu ngắt trang. Nhưng bạn được yêu cầu thêm thời gian phá vỡ các tài liệu hoặc tài liệu dài hơn có nội dung phức tạp, chẳng hạn như những tài liệu có hình ảnh và bảng lớn, do giới hạn trình duyệt về cách các bức tranh lớn có thể nhận được. (HTML2PDF sử dụng một khung vẽ khi tạo từng trang.)

html2pdf.js lợi thế

html2pdf.js là tuyệt vời nếu bạn muốn tạo trải nghiệm tải xuống đích thực cho người dùng muốn tạo các tệp PDF đơn giản từ trang web.

Vì html2pdf.js hợp nhất phía khách hàng thông tin, các tệp không vượt qua mạng nhiều lần. Do đó, nó đáng tin cậy và có khả năng mở rộng vô hạn cho mỗi người dùng muốn tải xuống từ ứng dụng của bạn. Và trải nghiệm người dùng của bạn ít bị ảnh hưởng bởi bất kỳ độ trễ mạng hoặc máy chủ nào dưới tải nặng.

Việc thực hiện phía khách hàng của html2pdf.js cũng đơn giản hóa sự siêng năng nếu dữ liệu của bạn có tính chất nhạy cảm (ví dụ: cá nhân, tài chính và/hoặc sức khỏe).

Thế hệ PDF không có máy chủ giúp cải thiện tính năng bảo mật, hiệu suất, độ tin cậy và khả năng mở rộng của trải nghiệm tải xuống của bạn.

HTML2pdf.js nhược điểm

Tuy nhiên, thư viện cũng có một vài hạn chế được ghi nhận bởi cộng đồng nguồn mở. Nhiều người gắn liền với việc dựa vào trình duyệt để tạo ra hình ảnh tĩnh của nội dung sau đó được bọc trong PDF.

HTML2PDF.JS Hạn chế

PDFS của bạn đã giành được tương tác (tức là, không có văn bản có thể tìm kiếm và có thể chọn)
Kết xuất với html2pdf.js, is isn hoàn hảo vì nó dựa vào chức năng kết xuất trình duyệt tích hợp
Bạn phải thêm chương trình phân trang

Bạn cũng có thể trải nghiệm:

Kích thước tệp lớn hơn do các trang sản xuất dưới dạng hình ảnh lớn
Mờ trong văn bản

HTML so với tạo mẫu văn phòng

Một xem xét khác là sử dụng HTML so với sử dụng các mẫu ở các định dạng khác như Office (DocX, PPTX và XLSX, cũng như các định dạng văn phòng kế thừa).

HTML là tuyệt vời cho các tài liệu đơn giản trong đó nội dung tương đối tĩnh và/hoặc giới hạn ở một trang.

Nhưng nó ít lý tưởng hơn cho các tài liệu được phân trang, đặc biệt là nếu nội dung của bạn cần điều chỉnh động khi có dân cư và nó phản xạ trên các trang, vì HTML được thiết kế cho các trang web mà không cần phân trang.

Ngược lại, các mẫu văn phòng có phân trang vào logic của định dạng, làm cho việc thực hiện thế hệ động dễ dàng hơn. Như một phần thưởng, người dùng có thể tải lên các mẫu của riêng họ ở các định dạng văn phòng mở được tạo trong các công cụ văn phòng quen thuộc của họ. Điều này giúp bạn dễ dàng tái chế từ một kho lưu trữ hiện có.

WebViewer có một công cụ văn phòng tích hợp để tạo các tệp PDF từ các mẫu ở định dạng văn phòng, không có máy chủ, phần mềm MS Office hoặc giấy phép MS Office cần thiết. Nó rơi vào bất kỳ ứng dụng web nào trực tiếp và hỗ trợ tất cả các khung hiện đại bao gồm React, Angular, Vue, Blazor, v.v. (chúng tôi thậm chí còn cung cấp bản dựng dành riêng cho Salesforce như một thành phần Web Lightning!)

HTML2PDF.JS Giải pháp thay thế

Nếu bạn muốn sản xuất các tệp PDF nhỏ gọn, độ chính xác cao với văn bản tương tác (có thể tìm kiếm/có thể chọn), chúng tôi sẽ đề xuất một phương pháp khác.

Bạn có thể xem xét một số thư viện và phương thức nguồn mở. Ví dụ:

Phản ứng để tạo PDF

Một cách khác, chúng tôi đã viết một hướng dẫn về cho phép bạn tạo các tệp PDF theo kiểu thông qua trình tạo PDF React.

Phương pháp phản ứng-pdf này hoạt động thông qua dịch vụ nút và Chrome không đầu và sử dụng các mẫu HTML. (Puppeteer và Babel-Node là sự phụ thuộc của nó.)

Bạn được yêu cầu tích hợp một thành phần máy chủ để xử lý việc chuyển đổi. Và nếu bạn tốt với điều đó, thì bạn sẽ rất tốt.

Văn bản và nội dung khác không được hiển thị thông qua vải như hình ảnh tĩnh. Do đó, hãy phản ứng với PDF có lợi thế so với HTML2PDF:

Các tệp của bạn nhỏ gọn hơn
Văn bản của bạn có thể tìm kiếm và có thể chọn được
PDFS của bạn in nhanh hơn và ở độ trung thực cao hơn
Nội dung phức tạp hiển thị ở độ trung thực cao hơn

Thế hệ pdfs không bị nặng, năng động

Mặt khác, có thể bạn muốn điều tốt nhất trong hai thế giới - trải nghiệm tải xuống đích thực mà bạn có thể nhúng trực tiếp vào ứng dụng của mình để tạo ra các tài liệu PDF đẹp, đẹp mắt.

Tiếp theo, chúng tôi xem xét một giải pháp cho phép bạn:

Tạo các tài liệu tương tác, phân trang và/hoặc phức tạp trong trình duyệt để người dùng của bạn tải xuống hoặc in
Tận dụng các lợi thế không có máy chủ của html2pdf.js
Hỗ trợ các tính năng bổ sung không dễ dàng có thể với Puppeteer, chẳng hạn như điền vào biểu mẫu
Đơn giản hóa các bảng có các trang trải dài

Đối với trường hợp sử dụng này, hãy xem xét Framework JS Advanced JS của chúng tôi-WebViewer từ tạo mẫu văn phòng. Điều này đưa bản địa, tạo PDF động vào trình duyệt để nhúng vào bất kỳ ứng dụng web nào. Kết quả là, nó trở nên rất dễ dàng để tạo các tài liệu PDF phức tạp trong vài giây.

Tạo tài liệu WebViewer là cùng một quy trình cho cả thế hệ phía máy khách hoặc phía máy chủ; Nó sử dụng cùng một mẫu, cùng một API và cùng một logic để tạo các tài liệu hoàn hảo pixel. Nó hợp nhất trong phía máy khách dữ liệu JSON và tận dụng bất kỳ mẫu tệp văn phòng nào (DOCX, PPTX, XLSX và các định dạng Office Office).

Không có máy chủ, giấy phép MS Office, phần mềm MS Office hoặc plugin là bắt buộc.

WebViewer JS DOC GEN Tính năng

WebViewer sử dụng logic pagination, vì vậy định dạng là tốt hơn. Ngoài ra, nó có logic trải dài bảng tạo ra các tiêu đề một cách nhất quán trên tất cả các trang, trong khi HTML phá vỡ tiêu đề để nó chỉ xuất hiện trên trang đầu tiên.

Các tính năng GEN WebViewer DOC khác bao gồm:

Tự động phát hiện kiểu mẫu và định dạng mẫu của bạn
Định tuyến năng động của văn bản xung quanh hình ảnh và số liệu được thêm vào
Điều kiện và vòng lặp

Cuối cùng, công nghệ này tận dụng độ chính xác hàng đầu của SDK PDFTRON. Vì vậy, bạn có thể tin tưởng vào các tệp PDF của mình để kết xuất và để nội dung để định hình như mong đợi. Bạn cũng có quyền truy cập vào hỗ trợ hàng đầu và hàng trăm tính năng JS khác của SDK PDFTRON nếu bạn muốn mở rộng giải pháp của mình với chức năng tài liệu bổ sung như tạo mẫu, Watermarking, v.v.

Cách bắt đầu với WebViewer JS PDF Generation

Trình tạo PDF dựa trên JavaScript nâng cao của PDFTRON yêu cầu mã tối thiểu để đứng dậy và chạy. Tải xuống WebViewer vào dự án của bạn và làm theo các hướng dẫn được tìm thấy trong Hướng dẫn tạo văn phòng. Sau đó, bạn có thể xem xét mở rộng giải pháp của bạn. Đi sâu vào thư viện thế hệ PDF hoặc WebViewer, nhiều khả năng không có máy chủ khác.

Gói (lại

Tạo PDF từ một trang web bằng JavaScript không phải là miếng bánh. Nhưng làm theo hướng dẫn này, giờ đây bạn có thể sử dụng Pure JS để tạo PDF, như hóa đơn, ngay trong ứng dụng web của bạn và làm cho các tệp PDF đó có thể tải xuống bởi người dùng của bạn!

Chúng tôi cũng đã xem xét các trường hợp sử dụng HTML2PDF.JS và các lựa chọn thay thế như Trình tạo PDF React.

Điểm mấu chốt: Nếu bạn cần chuyển đổi nhanh chóng, đơn giản và không quan tâm đến việc phân trang, HTML2PDF là một thành phần Gen PDF không có máy chủ tốt. Tuy nhiên, nếu bạn cần tạo các tài liệu phức tạp hơn hoặc nếu định dạng là quan trọng, hãy xem khung tạo tài liệu WebViewer. Nó cũng cho phép bạn nhúng trải nghiệm tải xuống đích thực, nhanh chóng cho người dùng của bạn và nó cung cấp sự linh hoạt hơn so với các lựa chọn thay thế thông qua trình tạo pdf không có máy chủ của nó. If you need a quick, simple conversion and don’t care about pagination, html2pdf is a good serverless PDF gen component. However, if you need to create more complex documents or if formatting is important, check out WebViewer’s document generation framework. It also lets you embed a fast, authentic download experience for your users, and it provides more flexibility than alternatives via its serverless PDF generator.

programming javascript jsPDF JS PDF generator jsPDF example