Không tải lên, 100% cục bộ, không cần tài khoản

HTML sang PDF

Dán HTML, chọn cỡ trang, và tải PDF xuống, mọi thứ được kết xuất trong trình duyệt.

Cách HTML sang PDF hoạt động

HTML sang PDF lấy mã đánh dấu HTML bạn dán vào trình soạn thảo, làm sạch nó bằng DOMPurify để loại bỏ các script và thuộc tính không an toàn, kết xuất nó trên canvas ẩn bằng html2canvas, và mã hóa kết quả thành PDF bằng jsPDF. Toàn bộ quy trình chạy trong tab trình duyệt của bạn; không có mã HTML hay đầu ra kết xuất nào được truyền đến bất kỳ máy chủ nào. Điều này khiến nó phù hợp để chuyển đổi các đoạn HTML chứa dữ liệu cá nhân mà bạn không muốn dán vào một dịch vụ trực tuyến.

Hãy hiểu định dạng đầu ra trước khi bạn dựa vào nó. Các trang PDF là hình ảnh raster, không phải văn bản vector. Văn bản trong đầu ra không thể chọn, không thể tìm kiếm, và không thể tái định dạng lại. Các tài nguyên bên ngoài như hình ảnh được tham chiếu bởi URL bị chặn bởi chính sách CORS của trình duyệt và sẽ không tải. Inline style và CSS nhúng hoạt động, nhưng bố cục phức tạp với phông chữ web tùy chỉnh hoặc CSS grid nâng cao có thể không kết xuất chính xác. Để chuyển đổi trung thực với tài liệu của các trang web đầy đủ, trình duyệt headless chạy phía máy chủ là công cụ phù hợp hơn.

Tác giả: Bastien Sulyan

Cách sử dụng HTML sang PDF, từng bước

  1. Dán mã đánh dấu HTML của bạn vào vùng trình soạn thảo.
  2. Tùy chọn điều chỉnh kích thước trang (A4 hoặc Letter) và hướng trang.
  3. Nhấn chuyển đổi; DOMPurify làm sạch HTML và html2canvas kết xuất nó.
  4. Chờ jsPDF mã hóa đầu ra canvas thành các trang PDF.
  5. Tải xuống tệp PDF.

Trường hợp sử dụng thường gặp

  • Bạn đã tạo hóa đơn HTML trong trình duyệt từ mẫu cục bộ và muốn bản sao PDF mà không cần gửi email đến dịch vụ chuyển đổi.
  • Một báo cáo HTML đơn giản được tạo từ dữ liệu API cần được lưu dưới dạng PDF để lưu trữ; dán HTML và chuyển đổi cục bộ.
  • Bạn đã viết mẫu email HTML có style và muốn xem trước nó trông như thế nào khi in dưới dạng PDF.
  • Một nhà phát triển cần tệp PDF nhanh từ một đoạn HTML trong quá trình kiểm thử, mà không cần cài đặt trình duyệt headless phía máy chủ.

Câu hỏi thường gặp

Tại sao văn bản trong tệp PDF đầu ra không thể chọn?

Quy trình chuyển đổi kết xuất HTML thành bitmap canvas bằng html2canvas, rồi mã hóa bitmap đó dưới dạng dữ liệu hình ảnh bên trong các trang PDF với jsPDF. Đầu ra là hình ảnh raster, không phải lớp văn bản. Nếu bạn cần PDF với văn bản có thể chọn, bạn cần trình duyệt headless phía máy chủ như Puppeteer, thứ mà công cụ này cố ý tránh để giữ xử lý cục bộ.

Tại sao hình ảnh trong HTML của tôi không xuất hiện trong PDF?

Hình ảnh được tải từ URL bên ngoài chịu sự ràng buộc bởi chính sách CORS của trình duyệt. Nếu máy chủ hình ảnh không gửi tiêu đề CORS cho phép, html2canvas không thể đọc dữ liệu pixel và khe hình ảnh kết xuất thành trống. Hình ảnh base64 inline được nhúng trực tiếp trong HTML hoặc hình ảnh từ cùng nguồn gốc hoạt động mà không có hạn chế này.

HTML tôi dán có được gửi đến máy chủ không?

Không. HTML ở trong bộ nhớ trình duyệt trong suốt quá trình. DOMPurify làm sạch nó phía máy khách, html2canvas kết xuất nó phía máy khách, và jsPDF mã hóa PDF phía máy khách. Không có gì rời khỏi tab trình duyệt.

DOMPurify làm sạch loại bỏ những gì?

DOMPurify loại bỏ các thẻ script, các thuộc tính xử lý sự kiện như onclick và onload, URL javascript:, và các cấu trúc khác có thể thực thi mã. Nó bảo toàn đánh dấu cấu trúc và tạo kiểu, vì vậy đầu ra kết xuất trông giống nhau nhưng an toàn để chèn vào ngữ cảnh tài liệu.

Tôi có thể chuyển đổi URL trang web đầy đủ thay vì dán HTML không?

Không. Công cụ hoạt động với mã đánh dấu HTML bạn dán trực tiếp. Tải URL sẽ yêu cầu tải trang, gặp phải hạn chế CORS với hầu hết các trang web và sẽ liên quan đến yêu cầu mạng đưa thao tác ra ngoài mô hình xử lý cục bộ.

Công cụ liên quan

Giữ mọi thứ cục bộ, khám phá các công cụ bổ trợ.

Tất cả công cụ PDF