Cách Chuyển Đổi HTML Sang PDF Bằng JavaScript
Trong bài viết này, chúng ta sẽ khám phá cách chuyển đổi một trang HTML thành tệp PDF bằng JavaScript. Việc này không chỉ giúp bạn lưu trữ nội dung một cách thuận tiện mà còn vô cùng hữu ích trong nhiều dự án, đặc biệt là khi bạn muốn tạo tài liệu có thể in từ một ứng dụng web.
Lý Do Bạn Nên Chuyển Đổi HTML Sang PDF
Chuyển đổi HTML sang PDF có thể mang lại nhiều lợi ích trong phát triển web. Một số lý do để thực hiện việc này bao gồm:
- Lưu trữ thông tin dễ dàng và tiện lợi.
- Tạo báo cáo hoặc hóa đơn từ các biểu mẫu trực tuyến.
- Chia sẻ tài liệu mà không cần người nhận có quyền truy cập vào web.
Các Bước Chuyển Đổi HTML Sang PDF
Chúng ta sẽ sử dụng thư viện html2pdf.js, một thư viện JavaScript mạnh mẽ cho phép chuyển đổi trang web hoặc phần tử HTML thành tệp PDF có thể in được trên phía client mà không cần đến server backend.
Bước 1: Cài Đặt Thư Viện html2pdf.js
Chúng ta có thể dễ dàng thêm thư viện này qua CDN. Dưới đây là link để bạn sử dụng:
html
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js"></script>
Bước 2: Chọn Phần Tử HTML Để Chuyển Đổi
Giả sử bạn có một phần tử div
chứa nội dung bạn muốn chuyển đổi. Ví dụ:
html
<div id="div-to-print">
<h1>Tiêu Đề PDF</h1>
<p>Nội dung của bạn ở đây</p>
</div>
Bước 3: Viết Mã JavaScript Để Tạo PDF
Dưới đây là mã JavaScript đơn giản để chuyển đổi div
thành PDF:
javascript
let element = document.getElementById('div-to-print');
html2pdf().from(element).save();
Đoạn mã này giúp lưu tệp PDF. Tuy nhiên, nếu bạn muốn mở tệp PDF trong một tab mới thay vì tải xuống, hãy làm theo các bước tiếp theo.
Mở PDF Trong Tab Mới Sử Dụng Blob
Để hiển thị PDF trong tab mới, ta sẽ tạo một Blob từ tệp PDF:
javascript
async function printHTML() {
let worker = await html2pdf().from(element).toPdf().output('blob').then((data) => {
let fileURL = URL.createObjectURL(data);
window.open(fileURL);
});
}
Vấn Đề Với CSS Khi Sử Dụng html2pdf
Một vấn đề phổ biến mà bạn có thể gặp là CSS không được áp dụng đúng cách. html2pdf có thể không tải được CSS từ các tệp bên ngoài. Để khắc phục điều này, bạn có thể:
- Viết CSS trực tiếp trong HTML bằng thẻ
<style>
. - Sử dụng inline CSS.
Giải Quyết Vấn Đề Văn Bản Không Thể Chọn
Khi sử dụng html2pdf, văn bản trong PDF có thể không thể chọn được vì hình ảnh đều được chuyển thành bảng. Để khắc phục điều này, bạn có thể sử dụng jsPDF, một thư viện cho phép bạn tạo PDF chứa văn bản thật:
javascript
let doc = new jsPDF();
doc.fromHTML(document.getElementById("div-to-print"), 22, 17);
let blobPDF = new Blob([doc.output()], { type: 'application/pdf' });
let blobUrl = URL.createObjectURL(blobPDF);
window.open(blobUrl);
Đặt Kích Thước Cho Tệp PDF
Cuối cùng, để thiết lập chiều cao và chiều rộng cho tệp PDF:
javascript
let doc = new jsPDF({orientation: 'l', unit: 'pt', format: [width, height]});
Kết Luận
Như vậy, chỉ với một vài bước đơn giản, bạn đã có thể chuyển đổi một phần tử HTML thành PDF bằng JavaScript một cách dễ dàng. Đây là kỹ năng hữu ích cho nhiều loại dự án khác nhau. Hãy áp dụng các bước này để tạo ra những tài liệu PDF cực đẹp từ nội dung web của bạn.
source: viblo