Lưu HTML sang PDF JavaScript

, nơi chúng tôi phải thiết kế phần tử trung tâm có viền màu xám phải được xuất sang pdf. bạn có thể mã hóa bất cứ thứ gì trong div này nhưng phần quan trọng nhất là div ID hoặc tôi muốn nói là ID phần tử, đây sẽ là tham chiếu đến mã tạo PDF cho thư viện html2pdf

Dòng 44. Nút xuất sang PDF

Kiểm tra dòng 44 này, tôi biết một nút HTML đơn giản với một số lớp Bootstrap trên đó, nhưng quan trọng hơn là chức năng mà chúng ta đang gọi ở đây, có tham số onclick=”generatePDF()”. chúng tôi đang gọi một hàm JavaScript ở đây trong sự kiện nhấp chuột của nút này. Hàm generatePDF() là mấu chốt của blog này và là cốt lõi của ví dụ của chúng tôi, hãy kiểm tra mã

Dòng 86–104. hàm tạoPDF()

Hình ảnh trên đang giải thích mọi thứ, tôi sẽ giải thích lệnh gọi hàm html2pdf() và biến

.from() -> .toContainer() -> .toCanvas() -> .toImg() -> .toPdf() -> .save()

0

Biến

.from() -> .toContainer() -> .toCanvas() -> .toImg() -> .toPdf() -> .save()

1 chứa tất cả các giá trị đang xác định cấu hình của tệp pdf. Lề, tất nhiên, lề trang chúng ta cần trên mỗi trang PDF, tên tệp là tên của tệp PDF đã xuất. Hình ảnh là một tham số quan trọng của đối tượng

.from() -> .toContainer() -> .toCanvas() -> .toImg() -> .toPdf() -> .save()

1

Thư viện html2pdf sử dụng thư viện html2canvas để vẽ hình ảnh trên trang web dưới dạng ảnh chụp màn hình trên trang pdf. Điều quan trọng cần lưu ý ở đây là bạn chỉ có thể xuất hình ảnh “jpeg”, “png” và “webp”(chrome), kiểm tra tại đây

Đối tượng html2canvas được truyền với tham số tỷ lệ, tạo PDF dựa trên tỷ lệ pixel của thiết bị trình duyệt. Kiểm tra các tham số ở đây chúng ta có thể truyền vào đối tượng này

Đối tượng jsPDF, ở đây chúng tôi đang chuyển các kích thước của trang PDF, định dạng của trang, độ chính xác và các đơn vị đo lường, như “mm”, “in” hoặc “px”. Đối tượng này sẽ được chuyển đến thư viện jsPDF để thiết lập trang pdf. kiểm tra danh sách đầy đủ các tham số tại đây

Một cuộc gọi cuối cùng đến chức năng html2pdf(). Ở đây, chúng tôi phải gọi nhiều hàm thư viện worker API) để đạt được mục tiêu của mình. Dòng chảy về cơ bản diễn ra như thế này

.from() -> .toContainer() -> .toCanvas() -> .toImg() -> .toPdf() -> .save()

Chúng ta phải gọi tất cả các chức năng theo thứ tự này. Nếu bạn muốn cài đặt trang của pdf, hãy gọi hàm

.from() -> .toContainer() -> .toCanvas() -> .toImg() -> .toPdf() -> .save()

0 trên hàm

.from() -> .toContainer() -> .toCanvas() -> .toImg() -> .toPdf() -> .save()

1 và chuyển đối tượng opt và cuối cùng chúng ta phải gọi hàm

.from() -> .toContainer() -> .toCanvas() -> .toImg() -> .toPdf() -> .save()

2 để lưu tệp pdf của mình

Trong chức năng generatePDF() của chúng tôi, dòng 102 có thể đơn giản là

.from() -> .toContainer() -> .toCanvas() -> .toImg() -> .toPdf() -> .save()

4, sau đó nó sẽ đặt tất cả các cài đặt trang thành mặc định cho pdf, bố cục mặc định là tỷ lệ dọc là một, lề là 1 và phần tử sẽ được căn trái

Tôi hy vọng bạn đã tìm thấy điều này hữu ích. Hãy cho tôi biết trong các nhận xét và thoải mái đặt câu hỏi

Xây dựng các ứng dụng web có thể kết hợp

Đừng xây dựng web nguyên khối. Sử dụng Bit để tạo và soạn các thành phần phần mềm tách rời — trong các khung yêu thích của bạn như React hoặc Node. Xây dựng giao diện người dùng và phụ trợ có thể mở rộng với trải nghiệm nhà phát triển mạnh mẽ và thú vị

Đưa nhóm của bạn đến Bit Cloud để lưu trữ và cộng tác trên các thành phần cùng nhau, đồng thời tăng tốc, mở rộng quy mô và chuẩn hóa đáng kể quá trình phát triển theo nhóm. Bắt đầu với các giao diện người dùng có thể kết hợp như Hệ thống thiết kế hoặc Giao diện vi mô hoặc khám phá phần phụ trợ có thể kết hợp. Hãy thử nó →

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

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

Làm cách nào để xuất nội dung div sang PDF bằng JavaScript?

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