Bộ chuyển đổi HTML sang PDF miễn phí

Chuyển đổi mã HTML sang PDF với tùy chỉnh đầy đủ. Thêm logo, tạo kiểu cho tài liệu của bạn và tạo các PDF chuyên nghiệp, tất cả trong trình duyệt của bạn.

Bản xem trước sẽ xuất hiện ở đây…

Tùy chọn PDF

Về chuyển đổi HTML → PDF

PDF bắt đầu như dự án "Camelot" của John Warnock tại Adobe vào năm 1991, một đề xuất nội bộ để tạo ra "một định dạng tệp chung có thể nắm bắt tài liệu từ bất kỳ ứng dụng nào, gửi các phiên bản điện tử của những tài liệu này đến bất kỳ đâu, và xem cũng như in chúng trên bất kỳ máy nào". Warnock là đồng sáng lập Adobe và là người phát minh (cùng với Charles Geschke) PostScript; mục tiêu của Camelot là lấy các đảm bảo về độ trung thực in của PostScript và làm cho chúng hoạt động trên màn hình cũng như giấy. Acrobat 1.0 và PDF 1.0 ra mắt vào tháng 6 năm 1993, với Acrobat reader thương mại đầu tiên có giá 50 đô la. PDF là định dạng độc quyền do Adobe kiểm soát trong mười lăm năm; Adobe phát hành đặc tả cho ISO vào năm 2008 với tên ISO 32000-1:2008 (PDF 1.7 được xuất bản như một tiêu chuẩn mở); PDF 2.0 (ISO 32000-2) chính ra mắt vào năm 2017 với các bản sửa đổi đến năm 2020. Adobe từ bỏ các quyền sáng chế còn lại vào tháng 4 năm 2023, làm cho PDF hoàn toàn không có bằng sáng chế trên toàn thế giới. PDF hiện là định dạng tài liệu di động phổ quát, mọi hệ điều hành đều đọc nó nguyên gốc, mọi máy in đều hiểu nó, mọi hệ thống pháp lý đều chấp nhận nó. Toàn bộ công trình dựa trên bố cục vị trí cố định kiểu PostScript: mỗi phần tử trên trang PDF có vị trí (x, y) tuyệt đối, được căn baseline theo hệ tọa độ trang, với văn bản được mã hóa dưới dạng font + tham chiếu glyph và đồ họa dưới dạng lệnh path.

Sự không khớp cơ bản giữa HTML và PDF là điều làm cho chuyển đổi HTML-sang-PDF khó hơn vẻ ngoài. HTML dựa trên reflow, nội dung thích ứng với viewport, các đoạn văn bản gấp lại khi thay đổi kích thước, bố cục thay đổi khi người dùng phóng to. PDF là bố cục cố định, mọi phần tử được định vị tuyệt đối, ranh giới trang là rõ ràng, không có reflow xảy ra. Chuyển đổi từ cái này sang cái kia buộc một loạt quyết định khó khăn: làm thế nào để chia các trang dài, font nhúng sống ở đâu trong PDF kết quả, đồ họa vector được bảo tồn như thế nào, các liên kết có vẫn nhấp được không. Không có câu trả lời đúng khách quan cho hầu hết những điều này, hành vi đúng phụ thuộc vào trường hợp sử dụng.

Hai cách tiếp cận JavaScript: Raster vs Vector

Chuyển đổi HTML-sang-PDF dựa trên trình duyệt có hai kiến trúc. html2pdf.js (Erik Koopmans, được công cụ này sử dụng) bao bọc hai thư viện cơ sở, html2canvas (kết xuất một phần tử HTML thành hình ảnh canvas bằng cách đọc bố cục từ DOM và vẽ lại) và jsPDF (xây dựng PDF từ các nguyên thủy). Pipeline: HTML thành hình ảnh canvas, nhúng hình ảnh trong PDF. Kết quả là chính xác đến pixel, những gì bạn thấy trong preview là những gì bạn nhận được trong PDF, nhưng chỉ là raster: văn bản trong PDF là một hình ảnh, không phải văn bản có thể chọn được. Bạn không thể tìm kiếm các từ bên trong PDF, không thể sao chép-dán từ nó, trình đọc màn hình không thể đọc nó. Đối với báo cáo, chứng chỉ, hóa đơn và tài liệu một lần thì điều này có thể chấp nhận được; đối với tài liệu mà văn bản cần có thể tìm kiếm hoặc dễ tiếp cận, đây là một hạn chế đáng kể. Kiến trúc thay thế sử dụng jsPDF trực tiếp với các nguyên thủy kết xuất văn bản (doc.text(), doc.line(), doc.image()), xây dựng PDF từ đầu với văn bản có thể chọn được và đồ họa vector. Điều này yêu cầu viết mã chuyển đổi cho mỗi phần tử HTML bạn muốn hỗ trợ, nhưng tạo ra một PDF "thực sự" có thể tìm kiếm và dễ tiếp cận. Sự đánh đổi: html2pdf.js là một dòng mã; cách tiếp cận jsPDF-trực tiếp là một dự án kỹ thuật đáng kể. Công cụ này ưu tiên dễ sử dụng (html2pdf.js) hơn khả năng chọn văn bản, hãy nhận thức được sự đánh đổi khi quyết định liệu đầu ra có đáp ứng nhu cầu của bạn hay không.

Các lựa chọn thay thế phía máy chủ, khi phía trình duyệt không đủ

wkhtmltopdf là công cụ dòng lệnh HTML-sang-PDF mã nguồn mở lâu đời, một bộ kết xuất dựa trên WebKit chuyển đổi HTML sang PDF trên máy chủ. Được sử dụng trong vô số pipeline CI, ứng dụng doanh nghiệp và dịch vụ tạo PDF. Dự án wkhtmltopdf đã được lưu trữ vào năm 2023 (kho lưu trữ GitHub hiện chỉ đọc); không nên là khuyến nghị cho các ứng dụng mới, mặc dù hàng tỷ PDF hiện có được tạo bằng nó. Puppeteer (Google, headless Chrome từ 2017) là tiêu chuẩn ngành hiện đại cho HTML-sang-PDF phía máy chủ. page.pdf() của Puppeteer sử dụng đầy đủ pipeline tạo PDF của Chromium, văn bản có thể chọn được, font nhúng, đồ họa vector, siêu liên kết đều hoạt động chính xác vì Chromium có backend PDF thực sự. Playwright (Microsoft, 2020) là phiên bản tương đương đa trình duyệt (Chromium, Firefox, WebKit) với khả năng tạo PDF tương tự. Prince (thương mại, 495 đô la/máy chủ) là triển khai CSS Paged Media tốt nhất trong loại, hỗ trợ bố cục nhiều cột, header/footer chạy, các trang được đặt tên, chú thích cuối trang, các tính năng OpenType. WeasyPrint (mã nguồn mở, Python) là phiên bản thay thế đa nền tảng với các tính năng tương tự. Paged.js là một polyfill mang các tính năng CSS Paged Media đến việc tạo PDF dựa trên trình duyệt. "Lưu dưới dạng PDF" tích hợp của trình duyệt (Tệp, In, Lưu dưới dạng PDF) là lựa chọn rẻ nhất, miễn phí, đã được cài đặt, hỗ trợ CSS Paged Media tương đối tốt và tạo ra đầu ra PDF văn bản có thể chọn được. Đối với chuyển đổi một lần, đây thường là câu trả lời đúng thay vì công cụ của bên thứ ba.

CSS Paged Media, cách hoạt động của in-thực-từ-CSS

CSS Paged Media Module của W3C định nghĩa một bộ các tính năng CSS đặc biệt cho đầu ra phân trang: các quy tắc @page để kiểm soát kích thước trang, lề và hướng; @page :left / @page :right cho các lề không đối xứng trên các trang trái và phải của một cuốn sách; @page :first để xử lý đặc biệt trang đầu tiên; margin boxes (@top-center, @bottom-right, v.v.) cho header và footer chạy; page-break-before / page-break-after / page-break-inside để kiểm soát nơi trang ngắt (với cú pháp hiện đại break-before: page / break-after: page / break-inside: avoid); orphans và widows để kiểm soát ngắt đoạn. Các trình duyệt triển khai các tập hợp con khác nhau của CSS Paged Media trong pipeline in của họ. Prince và WeasyPrint triển khai đầy đủ đặc tả; page.pdf() của Chrome bao phủ hầu hết; html2pdf.js (công cụ này) hỗ trợ các quy tắc page-break-* cơ bản nhưng bỏ qua các tính năng margin-box và named-page phức tạp hơn. Đối với các tài liệu cần bố cục chất lượng sách (trang tiêu đề, đầu chương, header chạy, chú thích cuối trang), hãy sử dụng Prince hoặc WeasyPrint; đối với trường hợp điển hình "lưu báo cáo này dưới dạng PDF", html2pdf.js là đủ.

Các trường hợp sử dụng phổ biến:

Phạm vi trung thực: Công cụ này làm gì và không làm gì

Công cụ này sử dụng html2pdf.js v0.10.1 (bản dựng đi kèm với html2canvas + jsPDF) để kết xuất HTML trong trình duyệt của bạn và tạo bản tải xuống PDF. PDF kết quả chính xác đến pixel so với bản preview, những gì bạn thấy là những gì bạn nhận được, nhưng văn bản được kết xuất dưới dạng hình ảnh raster, không phải văn bản có thể chọn được. Hỗ trợ các kích thước trang A4, Letter, A3 và A5, hướng dọc và ngang, lề có thể cấu hình, tên tệp tùy chỉnh và các quy tắc CSS page-break-* cơ bản để kiểm soát ngắt trang. Những gì công cụ này không làm và nơi bạn nên tìm kiếm phương án thay thế: văn bản có thể chọn / tìm kiếm được trong PDF (sử dụng Puppeteer phía máy chủ, hoặc "Lưu dưới dạng PDF" của trình duyệt); bố cục chất lượng sách với header chạy, footer, các trang được đặt tên, chú thích cuối trang (sử dụng Prince hoặc WeasyPrint phía máy chủ); thực thi JavaScript trong HTML được kết xuất (bộ chuyển đổi chạy HTML qua html2canvas không thực thi script bên trong nội dung được kết xuất); nội dung hoạt hình (PDF là tĩnh); media query phụ thuộc vào ngữ cảnh in (kết xuất xảy ra trong ngữ cảnh màn hình). Đối với nhu cầu hàng ngày "tạo PDF từ HTML này", html2pdf.js đủ tốt; đối với pipeline cấp độ sản xuất cần văn bản PDF thực và đầu ra dễ tiếp cận, Puppeteer phía máy chủ là tiêu chuẩn hiện đại.

Quyền riêng tư: Tại sao chỉ-trình duyệt quan trọng ở đây

Tạo PDF là một hoạt động kinh doanh SaaS đám mây phổ biến, các dịch vụ như DocRaptor, PDFShift, PDFCrowd, API2PDF tính phí cho mỗi PDF được tạo, thường vì họ đang chạy Puppeteer headless trên một server farm và hấp thụ chi phí kết xuất tăng tốc GPU. Sự đánh đổi là HTML bạn gửi đến các dịch vụ đó được xử lý trên cơ sở hạ tầng của họ: hóa đơn chứa thông tin khách hàng, báo cáo chứa dữ liệu kinh doanh, chứng chỉ chứa tên cá nhân, sơ yếu lý lịch chứa mọi thứ. Bất cứ thứ gì bạn tạo, dịch vụ bên thứ ba đều thấy. Công cụ này chạy hoàn toàn trong trình duyệt của bạn qua html2pdf.js, xác minh trong tab Network của DevTools khi bạn nhấp Generate (yêu cầu đi ra duy nhất là lấy thư viện html2pdf.js từ CDN; sau khi tải xong, không có yêu cầu thêm). Đưa trang offline (chế độ máy bay) sau khi thư viện tải xong và bộ chuyển đổi vẫn hoạt động. An toàn cho HTML chứa tên khách hàng, dữ liệu tài chính, template nội bộ hoặc bất kỳ nội dung nào bạn không muốn được sao chép vào ổ cứng của người lạ.

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

Các tính năng HTML/CSS nào được hỗ trợ?

html2pdf hỗ trợ HTML và CSS chuẩn, bao gồm các bố cục, các phông chữ, các màu, các hình ảnh và các bảng. Các tính năng nâng cao (hoạt ảnh, JavaScript, media query) bị giới hạn. Để có kết quả tốt nhất, sử dụng CSS inline hoặc các thẻ <style> thay vì các stylesheet bên ngoài.

Cách bao gồm các hình ảnh trong HTML của tôi?

Sử dụng các URI dữ liệu cho các hình ảnh hoặc đảm bảo các URL hình ảnh bên ngoài có thể truy cập và tương thích CORS. Các hình ảnh được mã hóa Base64 hoạt động một cách đáng tin cậy. Ví dụ: <img src="data:image/png;base64,…" />

Tại sao văn bản trong PDF không thể chọn được?

Vì html2pdf.js kết xuất HTML thành hình ảnh canvas trước, sau đó nhúng hình ảnh vào PDF. "Văn bản" của PDF thực sự là một hình ảnh raster của văn bản, không phải các glyph văn bản thực. Đây là sự đánh đổi cho độ trung thực hình ảnh: PDF trông chính xác như preview của trình duyệt, nhưng bạn không thể tìm kiếm, sao chép hoặc sử dụng trình đọc màn hình trên nó. Để có văn bản PDF có thể chọn được thực sự, các phương án thay thế là: sử dụng "Lưu dưới dạng PDF" tích hợp của trình duyệt (Tệp, In, Lưu dưới dạng PDF, tạo văn bản có thể chọn và miễn phí); sử dụng một công cụ phía máy chủ như page.pdf() của Puppeteer có pipeline tạo PDF đầy đủ của Chromium; hoặc viết JavaScript gọi trực tiếp các nguyên thủy doc.text() của jsPDF (làm việc nhiều hơn đáng kể).

Tại sao bản xem trước của tôi khác với PDF?

Bản xem trước hiển thị kết xuất HTML của bạn trong trình duyệt. Một số tính năng CSS hiển thị khác trong PDF. Kiểm tra các bố cục phức tạp trước khi tạo PDF cuối cùng và điều chỉnh các lề hoặc kích thước phông chữ nếu cần.

Tôi có thể thêm các điểm break trang trong HTML của mình không?

Có, sử dụng các page break CSS: thêm page-break-before: always; hoặc page-break-after: always; vào bất kỳ phần tử nào. Trong CSS3, sử dụng break-before: page; hoặc break-after: page; cho khả năng tương thích tốt hơn.

HTML của tôi có được tải lên máy chủ không?

Không. HTML bạn dán và PDF được tạo đều ở lại trong trình duyệt của bạn. Yêu cầu mạng duy nhất là cho chính thư viện html2pdf.js được tải từ một CDN công cộng vào thời điểm tải trang; sau khi tải xong, không có yêu cầu đi ra nào nữa. Xác minh trong tab Network của DevTools khi bạn nhấp Generate, hoặc đưa trang offline (chế độ máy bay) sau khi thư viện tải xong và bộ chuyển đổi vẫn hoạt động. An toàn cho HTML chứa dữ liệu khách hàng, chi tiết tài chính, template kinh doanh nội bộ hoặc bất kỳ nội dung nào bạn không muốn dịch vụ PDF bên thứ ba nhìn thấy.

Công cụ liên quan

Chuyển PDF sang hình ảnh Trình Chuyển Đổi Markdown Sang HTML Trình giảm thiểu HTML