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:

<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ụ:

<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:

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:

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:

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:

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