HTML và CSS xây dựng các trang web với phong cách và thiết kế. Chúng tôi có thể lưu trang web đó dưới dạng tệp PDF. Tạo một tệp PDF từ đầu bằng vanilla JavaScript khiến việc này trở nên rất khó khăn và mã sẽ dài
Có nhiều thư viện được tạo dựa trên JavaScript sẽ giúp chúng tôi thực hiện nhiệm vụ của mình. Các thư viện như html2pdf, jsPDF, v.v. là những thư viện nổi tiếng chuyển đổi các trang web thành pdf. Các thư viện này có thể được triển khai trong dự án bằng cách sử dụng tập lệnh mà chúng tôi đang thêm vào chương trình
Vì vậy, chúng ta hãy xem cách thêm HTML và CSS vào PDF
Trong hướng dẫn này, chúng ta sẽ tạo một tệp PDF bằng HTML và CSS bằng các cách sau –
- Sử dụng thư viện html2pdf
- Sử dụng thư viện jsPDF
Sử dụng Thư viện html2pdf
html2pdf là một thư viện JavaScript được sử dụng để chuyển đổi bất kỳ trang web nào thành pdf. Chúng tôi có thể thêm thư viện này bằng cách sử dụng cdnjs trong tập lệnh của tệp HTML. Nó rất dễ sử dụng và đó là một thư viện phía máy khách hoàn chỉnh
Người dùng có thể làm theo cú pháp dưới đây để chuyển đổi trang web thành PDF bằng thư viện html2pdf –
cú pháp
//To add html2pdf into to project //To create a pdf var element = document.getElementById[]; html2pdf[element];
Thực hiện theo cú pháp trên để chuyển đổi trang web HTML và CSS thành PDF
Thí dụ
Trong ví dụ này, chúng tôi đã sử dụng thư viện html2pdf để chuyển đổi một trang web thành pdf. Chúng tôi đã thêm tiêu đề và một đoạn trên trang web. Trang web này sẽ được chuyển đổi thành pdf sau khi nhấp vào nút trên trang web
Create PDF
Using html2pdf library to convert webpage into a pdf
This is the Demo Text!
Trong ví dụ trên, người dùng có thể thấy rằng bằng cách sử dụng thư viện jsPDF của JavaScript và chúng tôi đã chuyển đổi trang web HTML và CSS của mình thành PDF
Định dạng tệp PDF rất hữu ích để tải xuống dữ liệu hàng loạt trong ứng dụng web. Nó giúp người dùng tải xuống nội dung động ở định dạng tệp để sử dụng ngoại tuyến. Với chức năng xuất sang PDF, nội dung HTML được chuyển đổi thành tài liệu PDF và được tải xuống dưới dạng tệp PDF. Trong ứng dụng web động, tập lệnh phía máy chủ được sử dụng để chuyển đổi HTML sang PDF và tạo tệp PDF bằng PHP
Nếu bạn muốn một giải pháp phía máy khách để tạo tài liệu PDF, JavaScript là cách dễ nhất để chuyển đổi HTML sang PDF. Có nhiều thư viện JavaScript khác nhau có sẵn để tạo PDF từ HTML. jsPDF là một trong những thư viện tốt nhất để chuyển đổi HTML sang PDF bằng JavaScript. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo tài liệu PDF và chuyển đổi HTML sang PDF bằng JavaScript và thư viện jsPDF
Trong tập lệnh mẫu này, chúng tôi sẽ chia sẻ các đoạn mã để xử lý các hoạt động liên quan đến tạo PDF và chuyển đổi HTML sang PDF bằng JavaScript
Bao gồm thư viện jsPDF
Thư viện jQuery không bắt buộc, chỉ cần thêm tệp thư viện jsPDF để sử dụng lớp jsPDF
Lưu ý rằng. Bạn không cần tải riêng thư viện jsPDF, tất cả các tệp cần thiết đều có trong gói mã nguồn của chúng tôi
Tải và khởi tạo lớp jsPDF
Sử dụng dòng mã sau để bắt đầu lớp jsPDF và sử dụng đối tượng jsPDF trong JavaScript
window.jsPDF = window.jspdf.jsPDF; var doc = new jsPDF[];
Tạo PDF bằng JavaScript
Ví dụ sau đây cho thấy cách sử dụng thư viện jsPDF để tạo tệp PDF bằng JavaScript
- Chỉ định nội dung trong phương thức text[] của đối tượng jsPDF
- Sử dụng phương thức addPage[] để thêm trang mới vào PDF
- Sử dụng phương thức save[] để tạo và tải xuống tệp PDF
Sử dụng phương thức addImage[] để thêm hình ảnh vào PDF bằng cách sử dụng đối tượng jsPDF
- Đường dẫn/URL hình ảnh nguồn phải được chỉ định trong tham số đầu tiên trong phương thức
addImage[]
doc.addImage["path/to/image.jpg", "JPEG", 15, 40, 180, 180];
Chuyển đổi nội dung HTML sang PDF bằng JavaScript
Ví dụ sau đây cho thấy cách sử dụng thư viện jsPDF để chuyển đổi HTML sang PDF và tạo tệp PDF từ nội dung HTML bằng JavaScript
- Truy xuất nội dung HTML từ phần tử cụ thể theo ID hoặc lớp
- Chuyển đổi nội dung HTML của phần cụ thể của trang web và tạo PDF
- Lưu và tải xuống nội dung HTML dưới dạng tệp PDF
Mã HTML
Mã JavaScript
Cấu hình hữu ích
Thư viện jsPDF cung cấp nhiều phương pháp và tùy chọn khác nhau để định cấu hình tạo PDF. Dưới đây là một số phương thức hữu ích của lớp jsPDF thường được sử dụng để xuất HTML sang PDF bằng jQuery
Thay đổi hướng giấy
Sử dụng tùy chọn orientation
để đặt hướng giấy của PDF
Thay đổi phông chữ văn bản
Sử dụng phương pháp setFont[]
để đặt khuôn mặt phông chữ văn bản, căn chỉnh và xoay văn bản trong PDF
Chuyển đổi nội dung HTML sang PDF bằng hình ảnh và nhiều trang
Trong đoạn mã ví dụ này, chúng tôi sẽ trình bày cách sử dụng thư viện jsPDF để chuyển đổi HTML sang PDF và tạo tệp PDF từ nội dung HTML bao gồm cả hình ảnh bằng JavaScript
- Đường dẫn tệp tuyệt đối hoặc tương đối có thể được sử dụng trong hình ảnh src
- Cần có thư viện html2canvas để chuyển đổi nội dung HTML [có hình ảnh] sang tài liệu PDF
- Tùy chọn autoPaging giúp tự động ngắt tài liệu PDF thành nhiều trang
JavaScript
HTML
Tạo PDF với Watermark trong PHP bằng Dompdf
Phần kết luận
Mã ví dụ của chúng tôi giúp bạn chuyển đổi HTML sang PDF và tạo tệp PDF bằng JavaScript. Bạn có thể dễ dàng thêm chức năng Xuất ra PDF trên trang web mà không phụ thuộc vào tập lệnh phía máy chủ. Chức năng tạo PDF có thể được tăng cường với các tùy chọn cấu hình jsPDF theo nhu cầu của bạn. Tải xuống gói mã nguồn của chúng tôi để nhận tất cả các tệp cần thiết bao gồm thư viện JavaScript jsPDF
Bạn có muốn nhận trợ giúp triển khai hay sửa đổi hoặc nâng cao chức năng của tập lệnh này không?