Tạo PDF từ HTML trong trình duyệt là một trong những tiện ích được mong muốn nhất. Có nhiều giải pháp lưu trữ tạo PDF trực tuyến từ nguồn đã đăng
Khi sử dụng các công cụ trực tuyến, các tính năng cần thiết không khả dụng với một công cụ. Người dùng phải thỏa hiệp một số nhu cầu của họ khi phụ thuộc vào các công cụ trực tuyến
Tuy nhiên, các nhà phát triển như chúng tôi không cần phải thỏa hiệp. Chúng ta có thể tự tạo một tiện ích tùy chỉnh để tạo PDF từ HTML
giải pháp nhanh chóng
Có một giải pháp nhanh chóng để tạo PDF từ trang HTML. Trình hướng dẫn in của trình duyệt có tùy chọn “Lưu dưới dạng PDF” cùng với bảng xem trước
JavaScript này kích hoạt hành động in của trình duyệt. Sau đó, nó cung cấp một phần cụ thể của HTM để in
PDF Page Title
How to generate a pdf from the UI content is easy.
This describes how to generate pdf from HTML using
programming.
Generate PDF
Tôi chắc chắn rằng điều này là không đủ để khẳng định rằng việc tạo PDF được triển khai. -]
Để tạo một giải pháp chính thức để tạo PDF từ HTML, chúng tôi phải sử dụng các thư viện
Có sẵn các thư viện phổ biến trên thị trường để xây dựng công cụ tạo PDF cho một ứng dụng
Trong hướng dẫn này, chúng ta sẽ thấy một số thư viện hàng đầu hỗ trợ tạo PDF. Đối với mỗi thư viện, chúng tôi sẽ xem các bước thực hiện để tích hợp và phát triển
Thư viện có sẵn để tạo PDF từ HTML
Phần này liệt kê các thư viện được sử dụng để tạo PDF từ HTML trong bài viết này. Nó liên kết mã ví dụ thích hợp bên dưới để đưa bạn đến đúng nơi
Phần HTML sang pdf và jspdf có nhiều hơn một ví dụ. Đó là biết cách tạo PDF từ HTML chứa các nút hoặc vùng chứa phức tạp. Thí dụ. Bảng HTML, phòng trưng bày hình ảnh, v.v.
1. HTML sang PDF
Phương pháp thư viện HTML sang pdf là một cách để tạo PDF từ HTML. Đây là quy trình gồm hai bước để có được đầu ra PDF tiêu chuẩn
Đầu tiên, lấy URL CDN của thư viện này từ một nguồn xác thực. Sau đó, hãy làm theo hai bước sau để nhận tệp PDF đầu ra
- Khởi tạo lớp thư viện html sang pdf
- Ánh xạ nội dung HTML để tạo và lưu PDF
Vòng đời cơ bản để tạo PDF từ HTML bằng thư viện này được hiển thị trong biểu đồ bên dưới
ví dụ 1. Tạo PDF từ HTML chỉ chứa văn bản
Generate PDF from HTML using html to pdf library
ví dụ 2. Cung cấp tùy chọn thư viện để ghi đè giá trị mặc định
Không giống như ví dụ trên, nó sẽ gửi một loạt các tùy chọn để tạo PDF từ HTML. Nó ghi đè tên tệp mặc định, lề, hướng và nhiều giá trị mặc định khác như đã chỉ định
var pdfContent = document.querySelector["#pdf-content"];
var optionArray = {
margin: 10,
filename: 'output.pdf',
jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
};
// html to pdf generation with the reference of PDF worker object
html2pdf[].set[optionArray].from[pdfContent].save[];
Trong phương pháp nguyên khối cũ, html2pdf[] chấp nhận các tùy chọn và tham chiếu HTML. Để tạo PDF từ tham chiếu đối tượng HTML DOM và các tùy chọn JSON được cung cấp như sau,
html2pdf[pdfContent, optionArray];
2. jsPDF
Để tạo PDF từ HTML, một số thư viện cần có định nghĩa tài liệu về đánh dấu. jsPDF được biết đến phổ biến với tính năng nhận đầu vào HTML ở bất kỳ định dạng nào
Ví dụ: nó có khả năng chấp nhận HTML ở các định dạng sau
- đánh dấu HTML
- Dữ liệu đầu vào tệp HTML
- Đối tượng phần tử HTML với tham chiếu của bộ chọn
ví dụ 1. Giải pháp thay thế tương đương để tạo PDF từ HTML
Ví dụ này tạo tham chiếu sử dụng cơ bản của jsPDF để tạo PDF từ mẫu HTML. Nó bao gồm một nguồn mẫu bên ngoài trong bộ chứa giao diện người dùng
JavaScript ánh xạ trình xử lý sự kiện tới nút “Tạo PDF” được tìm thấy trong mẫu HTML
Khi nhấp vào nút, tập lệnh sẽ bắt đầu jsPDF với thông số kỹ thuật PDF thích hợp. Nó sử dụng. html[] xử lý thư viện jsPDF tp tạo PDF từ đối tượng HTML được cung cấp làm đối số
Trình xử lý này xác định chức năng gọi lại thực thi chuyển đổi HTML sang PDF. Nó lưu hoặc mở tài liệu PDF đã tạo trong cuộc gọi lại
Tập lệnh này sử dụng URL CDN jsPDF. Nếu bạn muốn tải xuống jsPDF này, tài liệu chính thức có chứa lệnh npm để cài đặt thư viện này
jsPDF Example
ví dụ 2. Tạo nhiều trang PDF từ trang HTML
Thư viện jsPDF là một trong những thư viện tốt nhất được sử dụng để tạo PDF từ HTML ở phía máy khách. Chúng ta đã thấy nhiều ví dụ hơn trong các bài viết trước
Ví dụ này dùng để tạo tài liệu nhiều trang từ định dạng HTML sang PDF dài
Nó sử dụng các trình xử lý trang của jsPDF như addPage, setPage, insertPage, v.v.
Nó tính toán chiều cao và chiều rộng của nội dung trang PDF và phân chia nội dung nguồn HTML. Nó tạo ra các đoạn nội dung trang từ đánh dấu HTML
Nó tính toán tổng số trang để phân trang các đoạn HTML thành tài liệu nhiều trang PDF. addPage[] tạo một phiên bản trang để hiển thị đoạn nội dung trang trong đó
Nó lặp lại quy trình tương tự để tạo PDF từ HTML chứa nội dung dài
Generate multi-page PDF from HTML - jsPDF
Donec id leo quis felis vehicula bibendum sit amet ut tellus. Sed
sagittis aliquet rhoncus. Pellentesque vulputate nunc ultricies,
egestas augue ac, ullamcorper dui. Etiam diam mauris, molestie in purus
a, venenatis pretium leo. Sed id metus eleifend, scelerisque neque id,
posuere arcu. Nunc cursus et dui quis fringilla. In in turpis feugiat
diam porttitor tempus. In hendrerit diam dolor, id pellentesque ante
volutpat a. Nam tortor sapien, semper ut justo et, accumsan imperdiet
sem. Sed euismod nunc vitae dolor porttitor ullamcorper. Donec sed
lacinia dui. Nunc sed suscipit erat. Phasellus euismod ultrices velit,
hendrerit tempor diam elementum ut.
Generate PDF
3. wkHTMLtoPDF
Nó là một công cụ dòng lệnh để tạo các tệp PDF từ HTML. Tìm bản phát hành phù hợp mới nhất. Sau đó, cài đặt thư viện này trước khi chạy lệnh trong terminal
Nó yêu cầu cung cấp nguồn HTML đã được làm sạch để tạo đầu ra PDF
Sau khi cài đặt, thêm đường dẫn thư viện vào đường dẫn hệ thống. Sau đó, chạy lệnh sau
wkhtmltopdf sanitised_html_source_path output.pdf
Cách tốt nhất là đọc nội dung trang từ xa và làm sạch HTML. Sau đó, viết nội dung đã làm sạch vào HTML cục bộ để chuyển nội dung đó tới lệnh tạo PDF. Bài đăng cURL PHP sẽ là cách tốt nhất để đọc nội dung từ xa so với file_get_contents[]
Nó cung cấp thư viện C để làm quen qua lập trình
Nếu bạn muốn thực thi lệnh thông qua một chương trình, hàm PHP exec[] có thể giúp ích
Có giao diện của bên thứ ba để tạo PDF từ HTML bằng cách sử dụng wkHTMLtoPDF. Truy cập trang Github để cài đặt thư viện PHP dùng để chuyển nội dung HTML sang PDF
Mã này hiển thị lệnh cài đặt thư viện này vào thư mục nhà cung cấp của bạn
________số 8Ví dụ sử dụng đơn giản này có thể bắt đầu để bắt đầu với thư viện PHP này để tạo PDF từ HTML
saveAs['output.pdf']] {
$error = $pdf->getError[];
// return error to the request handler
}
4. pdfmake
Thư viện pdfmake có cả tích hợp phía máy khách và phía máy chủ. Cả hai phương pháp đều tạo PDF từ HTML bằng cách truy cập nội dung phần tử từ JavaScript
Cài đặt
Ví dụ này sử dụng URL CDN pdfmake để nhập phụ thuộc. Tài liệu này có các phương pháp cài đặt và tích hợp thư viện thay thế
Ví dụ: nó cung cấp các lệnh npm để tải xuống node_modules với các thành phần phụ thuộc bắt buộc
Tích hợp phía máy khách
Ví dụ này sử dụng phương thức phía máy khách của pdfmake để tạo PDF từ các đối tượng HTML
Nó truy cập nội dung phần tử HTML từ JavaScript và chuẩn bị đối tượng định nghĩa tài liệu
Định nghĩa tài liệu có thể cung cấp các loại nội dung sau
HTML chứa tiêu đề, văn bản và nội dung hình ảnh. Đối tượng docDefinition được xây dựng với nội dung của các phần tử HTML này
Hình ảnh sẽ được cung cấp dưới dạng dữ liệu nhị phân được mã hóa. Trong ví dụ này, JavaScript
Sau đó, pdfmake. mã xử lý createPDF[] tạo PDF từ HTML. Đoạn mã dưới đây mở đầu ra HTML sang PDF trong màn hình trình duyệt. Thư viện pdfmake cũng cho phép in và tải xuống tài liệu PDF
Sự kết luận
Vì vậy, chúng tôi đã thấy nhiều phương pháp khác nhau để tạo PDF từ mã nguồn HTML hoặc tệp. Tôi hy vọng các ví dụ sử dụng của các thư viện có thể đưa ra các lựa chọn để kích hoạt tạo PDF
Chia sẻ suy nghĩ của bạn về khái niệm tạo PDF mà chúng tôi đã thấy. Ngoài ra, hãy chia sẻ nhận xét của bạn về mã ví dụ để tạo PDF từ HTML