Xuất html css sang pdf

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?

Làm cách nào để chuyển đổi HTML CSS sang PDF?

Làm cách nào để chuyển đổi HTML CSS sang PDF bằng JavaScript?

Làm cách nào để chuyển đổi HTML CSS sang PDF bằng jQuery?

Làm cách nào để tạo kiểu PDF bằng CSS?