Chuyển HTML Sang PDF Online

Tính năng nổi bật

• Ba nguồn: dán mã HTML có kèm thẻ style, mở tệp .html/.htm tới 5 MB, hoặc nhập URL trang web công khai
• Khổ giấy A4, A5, A3, Letter, Legal; hướng dọc hoặc ngang; lề đặt sẵn từ 0 tới 25 mm hoặc tự nhập từng cạnh
• Thu phóng nội dung từ 50% tới 100% để trang web rộng vừa khổ giấy
• Khung xem trước dựng đúng bề rộng vùng in, vạch đỏ ở chỗ ngắt trang ước tính, ước lượng tổng số trang
• In / Lưu PDF qua hộp thoại in của trình duyệt: chữ trong PDF là chữ thật, chọn và tìm kiếm được
• Tải PDF dạng ảnh (html2canvas và jsPDF) cho máy không có hộp thoại in, tối đa 40 trang
• Làm sạch bằng DOMPurify: bỏ script, thuộc tính onclick, iframe, liên kết javascript:, thẻ meta chuyển trang
• Tùy chọn in màu nền, tránh cắt đôi ảnh và dòng bảng, thu ảnh quá rộng, ẩn thanh điều hướng và chân trang

Khi nào cần chuyển HTML sang PDF

Bạn có một mẫu báo giá, hóa đơn, thư mời hoặc hợp đồng viết bằng HTML và CSS (do lập trình viên làm, xuất từ một hệ thống quản lý, hoặc do trợ lý soạn giúp) và cần gửi khách dưới dạng PDF để họ không sửa được và mở được trên mọi máy. Bạn muốn lưu lại một bài viết, một trang chính sách, một trang tài liệu kỹ thuật thành PDF để đọc khi không có mạng hoặc làm bằng chứng nội dung tại một thời điểm. Bạn cần in một trang web nhưng lệnh in mặc định của trình duyệt lại in kèm menu, quảng cáo, bị cắt chữ ở mép phải. Công cụ này gom những việc đó vào một chỗ: chọn đúng khổ giấy, chỉnh lề, xem trước chỗ ngắt trang rồi mới in, thay vì in thử nhiều lần.

Lợi ích khi sử dụng

• •PDF giữ chữ thật: sao chép được đoạn văn, tìm kiếm được bằng Ctrl+F, chữ nét khi phóng to
• •Thấy trước số trang và chỗ ngắt trang trước khi in, không tốn giấy in thử
• •Mã dán vào được xử lý ngay trên trình duyệt, không lưu lại trên máy chủ
• •Không chạy JavaScript của trang lạ nên an toàn hơn khi mở mã HTML không rõ nguồn
• •Một công cụ cho cả mẫu chứng từ tự viết lẫn trang web có sẵn
• •Miễn phí, không cần tài khoản, không đóng dấu chìm lên PDF

Cách chuyển HTML sang PDF bằng công cụ

1. 1Chọn nguồn. Dán mã HTML: dán vào ô lớn, hoặc bấm Mở tệp .html. Lấy từ URL: nhập địa chỉ trang rồi bấm Tải trang.
2. 2Với mã dán vào có ảnh hoặc CSS đường dẫn tương đối (ví dụ images/logo.png), điền URL gốc của website vào ô bên dưới để ảnh tải được.
3. 3Chọn khổ giấy, hướng dọc hay ngang, lề trang. Nếu trang web bị tràn ngang, giảm thu phóng xuống 90% hoặc 80%.
4. 4Xem khung bên phải: vạch đỏ là chỗ ngắt trang ước tính, dòng trên cùng ghi tổng số trang. Bật hoặc tắt các tùy chọn in màu nền, tránh cắt đôi ảnh cho tới khi ưng ý.
5. 5Bấm In / Lưu PDF. Trong hộp thoại in, chọn máy in là Lưu dưới dạng PDF (Save as PDF), tắt Đầu trang và chân trang, rồi bấm Lưu.
6. 6Nếu trình duyệt không có hộp thoại in phù hợp (thường gặp trên điện thoại), bấm Tải PDF dạng ảnh để nhận tệp ngay.

Hai kiểu PDF: In / Lưu PDF và PDF dạng ảnh khác nhau thế nào

Nút In / Lưu PDF giao tài liệu cho bộ máy in của chính trình duyệt (Chrome, Edge, Firefox, Safari). Bộ máy này dàn trang lại theo khổ giấy, vẽ chữ bằng phông thật và nhúng phông vào PDF. Kết quả là PDF dạng văn bản: bạn bôi đen được từng chữ, sao chép sang Word, tìm kiếm, và chữ không bị răng cưa khi phóng to. Liên kết trong trang thường vẫn bấm được trong PDF. Tệp cũng nhỏ: một trang báo giá A4 thường chỉ vài chục KB. Nhược điểm là phải qua một hộp thoại, và trên điện thoại một số trình duyệt in nhầm cả trang công cụ thay vì khung in. Nút Tải PDF dạng ảnh chụp từng trang thành ảnh JPEG bằng thư viện html2canvas (độ phân giải gấp đôi màn hình) rồi ghép vào PDF bằng jsPDF. Tệp tải thẳng về máy, không qua hộp thoại, nhưng chữ đã thành ảnh: không chọn được, không tìm được, phóng to sẽ mờ, và tệp nặng hơn nhiều. html2canvas tự vẽ lại trang theo cách hiểu của nó nên một số hiệu ứng CSS mới (bộ lọc, một số kiểu chữ) có thể khác bản gốc, và ảnh lấy từ tên miền khác mà không cho phép tải chéo (CORS) sẽ bị bỏ trống. Vì vậy hãy coi PDF dạng ảnh là phương án dự phòng, còn In / Lưu PDF là cách chính.

Khổ giấy, lề và vùng in được tính thế nào

Công cụ đặt khổ giấy bằng quy tắc @page của CSS (CSS Paged Media Module Level 3 của W3C), ví dụ A4 dọc là size: 210mm 297mm. Khổ A theo chuẩn ISO 216: A5 là 148 x 210 mm, A4 là 210 x 297 mm, A3 là 297 x 420 mm. Letter (8,5 x 11 inch, tức 215,9 x 279,4 mm) và Legal (8,5 x 14 inch, 215,9 x 355,6 mm) là khổ thông dụng ở Mỹ, cần khi gửi tài liệu cho đối tác Bắc Mỹ. Vùng in là khổ giấy trừ lề. Với A4 dọc lề 15 mm, vùng in là 180 x 267 mm. CSS quy ước 1 inch bằng 96 px và 1 inch bằng 25,4 mm (CSS Values and Units), nên 180 mm tương đương khoảng 680 px CSS: đó chính là bề rộng trang web có được khi in. Một trang web thiết kế cho màn hình rộng 1.200 px mà in vào 680 px thì bố cục sẽ chuyển sang dạng hẹp (nếu trang có thiết kế đáp ứng) hoặc tràn ra ngoài và bị cắt. Đổi sang A4 ngang lề 15 mm, vùng in rộng 267 mm, khoảng 1.009 px. Công cụ giới hạn mỗi lề tối đa 60 mm và luôn chừa ít nhất 30 mm vùng in mỗi chiều; ô lề nhập sai hoặc để trống được tính là 0. Gõ 12,5 hay 12.5 đều được hiểu là 12,5 mm.

Ước lượng số trang và vạch ngắt trang

Khung xem trước là một iframe rộng đúng bằng vùng in, đặt trên nền giấy trắng có lề. Sau khi trang tải xong, công cụ đo chiều cao tài liệu rồi chia cho chiều cao vùng in. Ví dụ A4 dọc lề 15 mm có vùng in cao 267 mm, khoảng 1.009 px; một tài liệu cao 3.000 px được ước tính 3 trang và vạch đỏ nằm ở mốc 1.009 px và 2.018 px. Đây là ước lượng: khi in thật, trình duyệt có thể dời chỗ ngắt lên trên để không cắt đôi một ảnh, một dòng bảng hay khối code (tùy chọn Tránh cắt đôi đang bật), nên có lúc thêm một trang so với ước tính. Thu phóng nội dung cũng được tính: ở 80%, mọi thứ nhỏ lại và chiều cao đo được giảm theo, nên số trang giảm. Nếu trang có ảnh tải chậm, con số được đo lại sau khoảng 1 và 3 giây.

Vì sao trang web lấy từ URL bị thiếu nội dung

Khi nhập URL, máy chủ của công cụ chỉ tải mã HTML gốc mà trang trả về (tối đa 3 MB, không kèm cookie), sau đó toàn bộ JavaScript bị bỏ. Có bốn trường hợp thường gặp làm bản in thiếu. Thứ nhất, trang dựng nội dung bằng JavaScript: các ứng dụng viết bằng React, Vue, Angular chỉ chạy trên trình duyệt thường trả về một khung rỗng kiểu thẻ div id=root, nội dung chỉ xuất hiện khi script chạy. Trang dùng kỹ thuật dựng sẵn phía máy chủ (như Next.js, Nuxt, WordPress) thì vẫn có chữ. Thứ hai, trang cần đăng nhập: không có cookie phiên nên máy chủ của trang trả về trang đăng nhập hoặc mã 401, 403. Thứ ba, nội dung tải thêm khi cuộn (bình luận, danh sách vô tận, ảnh tải lười): công cụ đã tự chuyển các ảnh khai báo kiểu data-src sang src, nhưng phần nội dung gọi thêm bằng script thì không có. Thứ tư, CSS hoặc phông chữ chặn tải chéo tên miền: bản xem trước chạy trên tên miền tanphatdigital.com, nên phông chữ trên máy chủ khác không cho phép CORS sẽ không dùng được và chữ hiển thị bằng phông dự phòng. Cách khắc phục chung: mở trang trên trình duyệt của bạn, chờ tải đủ, bấm chuột phải chọn Kiểm tra (Inspect), sao chép phần tử html (Copy outerHTML) rồi dán vào ô Dán mã HTML kèm URL gốc. Mã sao chép kiểu này đã có nội dung do script dựng ra.

Làm sạch HTML: công cụ bỏ những gì và vì sao

Mã HTML dán vào hoặc tải từ trang lạ có thể chứa script đọc dữ liệu, chuyển hướng sang trang khác hay mở cửa sổ quảng cáo. Công cụ dùng thư viện DOMPurify để lọc trước khi hiển thị: bỏ thẻ script, mọi thuộc tính sự kiện như onclick, onload, onerror, liên kết bắt đầu bằng javascript:, thẻ iframe, object, embed (video YouTube nhúng sẽ biến mất), thẻ meta chuyển trang, thẻ base của trang gốc, khối noscript. Thẻ link chỉ giữ loại rel=stylesheet, các loại preload, prefetch bị bỏ. CSS được giữ đầy đủ: thẻ style, thuộc tính style, tệp CSS liên kết, cả quy tắc @media print mà trang tự viết. Thêm một lớp bảo vệ nữa: khung xem trước, khung in và khung dựng PDF dạng ảnh đều là iframe có thuộc tính sandbox không cho phép chạy script, không mở cửa sổ mới, không gửi biểu mẫu, nên kể cả khi một đoạn mã lọt qua bộ lọc thì nó cũng không chạy được. Biểu mẫu (ô nhập, nút) vẫn hiển thị để bạn in được mẫu đơn trống. Với URL, máy chủ đã bỏ khối script từ đầu để giảm dung lượng gửi về, trình duyệt làm sạch thêm một lần nữa. Khung trên trang công cụ cho biết đã bỏ bao nhiêu khối script và thuộc tính sự kiện.

Viết HTML để in ra PDF đẹp: vài quy tắc CSS nên dùng

Nếu bạn tự viết mẫu chứng từ để chuyển sang PDF, vài quy tắc CSS giúp kết quả ổn định hơn. Dùng đơn vị mm hoặc pt cho cỡ chữ và khoảng cách khi cần khớp giấy thật, ví dụ chữ thân 11pt. Đặt break-inside: avoid cho khối không được cắt đôi như chữ ký, khung tổng tiền. Đặt break-before: page cho phần cần sang trang mới, ví dụ phụ lục. Để tiêu đề cột bảng lặp lại ở mỗi trang, đặt hàng tiêu đề trong thẻ thead (khi tùy chọn Tránh cắt đôi đang bật, như mặc định, công cụ tự thêm display: table-header-group). Tránh chiều cao cố định kiểu height: 100vh, vì khi in vh được tính theo trang giấy và nội dung dài sẽ bị cắt; công cụ đã ép html và body về height: auto. Màu nền và ảnh nền mặc định không được in để tiết kiệm mực; tùy chọn In màu nền bật thuộc tính print-color-adjust: exact (CSS Color Adjustment Module Level 1) để giữ chúng, nhưng trong hộp thoại in của Chrome bạn có thể vẫn cần tích Đồ họa nền (Background graphics). Cuối cùng, phông chữ: dùng phông hệ thống như Arial, Times New Roman hoặc phông web có hỗ trợ đủ dấu tiếng Việt để tránh lỗi dấu.

Thiết lập hộp thoại in trên từng trình duyệt

Chrome và Edge: ở mục Máy in hoặc Đích, chọn Lưu dưới dạng PDF (Save as PDF; trên Edge là Microsoft Print to PDF cũng được nhưng Save as PDF giữ liên kết tốt hơn). Mở Cài đặt khác (More settings): Lề để Mặc định vì công cụ đã đặt lề qua CSS, Tỷ lệ để Mặc định, bỏ tích Đầu trang và chân trang nếu không muốn ngày giờ, tiêu đề và URL in ở mép giấy, tích Đồ họa nền nếu muốn màu nền. Firefox: chọn Lưu thành PDF, trong Cài đặt khác có In nền (Print backgrounds) và Đầu trang và chân trang. Safari trên Mac: trong hộp thoại in bấm nút PDF ở góc dưới, chọn Lưu thành PDF; mở Hiển thị chi tiết để chọn In nền. Khổ giấy trong hộp thoại có thể hiện khác (ví dụ Letter trên máy cài vùng Mỹ), nhưng với Chrome, Edge và Firefox quy tắc @page size thường được ưu tiên. Nếu PDF ra sai khổ, chọn lại khổ giấy ngay trong hộp thoại cho khớp với lựa chọn trên công cụ.

Giới hạn của công cụ

Mã dán vào tối đa khoảng 3 triệu ký tự, tệp .html tối đa 5 MB, mã HTML lấy từ URL tối đa 3 MB (phần sau bị cắt và có thông báo). Mỗi địa chỉ IP được tải URL 20 lần mỗi giờ. Chỉ nhận URL http và https trên cổng web tiêu chuẩn, không nhận địa chỉ mạng nội bộ. PDF dạng ảnh tối đa 40 trang; trang dài hơn chỉ lấy 40 trang đầu, và nên dùng In / Lưu PDF. Công cụ không tải tệp PDF có sẵn: nếu URL trỏ tới một tệp PDF, công cụ báo để bạn tải thẳng. Công cụ không vượt qua tường phí, không đăng nhập hộ, không chạy script nên không chụp được biểu đồ vẽ bằng JavaScript (thẻ canvas sẽ trống). Ảnh định dạng mà trình duyệt không hiển thị được cũng không có trong PDF. Đầu trang, chân trang có số trang tùy chỉnh (ví dụ Trang 1/5 kèm logo) cần các tính năng CSS chưa được mọi trình duyệt hỗ trợ đầy đủ nên công cụ chưa có; hộp thoại in của trình duyệt có đầu trang, chân trang mặc định với số trang nếu bạn cần.

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

Từ khóa liên quan

• chuyển html sang pdf
• html to pdf online
• chuyển trang web sang pdf
• lưu trang web thành pdf
• url to pdf
• chuyển link sang pdf
• in trang web ra pdf
• xuất html ra pdf
• chuyển code html sang pdf
• lưu web dạng pdf
• chuyển website thành pdf
• html pdf converter
• in html khổ a4
• save web as pdf
• tải trang web về pdf
• chuyển file html sang pdf
• xuất pdf từ html css
• html2pdf
• web to pdf
• convert html to pdf