Chuyển tệp HTML sang PDF mà vẫn giữ nguyên định dạng
Bởi đội ngũ FreePDF ·
Gửi một tệp .html cho người khác là chuyện khá bấp bênh. Trên máy tạo ra nó thì hiển thị đúng, rồi đến nơi lại mất tệp định dạng, hoặc mở bằng một trình duyệt khác thì dàn trang lệch đi, hoặc bị chặn ngay khi đính kèm email. Chuyển sang PDF là cố định trang lại: một tệp duy nhất, bố cục như nhau ở mọi nơi, và in ra đúng như đang thấy.
Cái gì theo được, cái gì không
Tải tệp .html hoặc .htm lên, nó sẽ được kết xuất thành PDF theo đúng cách một trình duyệt kết xuất để in. Có ba điều nên biết trước khi chuyển:
- CSS nằm trong tệp vẫn được áp dụng. Mọi thứ trong khối
<style>hay thuộc tínhstyle=đều theo sang: phông chữ, màu, đường kẻ, bảng, nền. - JavaScript không được chạy. Trang được kết xuất đúng như nó nằm trong tệp. Nếu một biểu đồ hay một bảng do script vẽ ra khi tải trang, PDF sẽ chỉ nhận được cái khung rỗng ban đầu.
- Đường dẫn tương đối không trỏ tới đâu cả. Tệp tải lên không có địa chỉ nào để lấy làm gốc, nên
<img src="images/logo.png">hay<link href="style.css">chẳng trỏ vào gì. URL tuyệt đối bắt đầu bằnghttps://thì vẫn được tải bình thường.
Cách xử lý điều cuối là làm một trang tự chứa: dán CSS vào khối <style>, còn ảnh thì dùng URL đầy đủ hoặc nhúng thành URI data:. Phần lớn công cụ sinh báo cáo HTML — và chính lựa chọn “Lưu trang thành → tệp đơn” của trình duyệt — vốn đã làm như vậy.
Khổ giấy và lề điều khiển được từ CSS
Vì quá trình kết xuất diễn ra như đầu ra để in, CSS dành cho in vẫn có hiệu lực. Nếu chính bạn sinh ra HTML đó, vài quy tắc là đủ dùng:
@page { size: A4; margin: 20mm; }định khổ giấy và lề. DùngLetterthay choA4nếu đó là khổ giấy của bạn.break-before: pageđặt trên tiêu đề khiến mỗi mục bắt đầu ở một trang mới.break-inside: avoidđặt trên một bảng hay một khối giúp nó không bị cắt sang hai trang.- Các quy tắc trong
@media printđều có hiệu lực, nên thanh điều hướng, banner và mọi thứ bạn vốn ẩn khi in sẽ không vào PDF.
Khi nào hộp thoại in của trình duyệt là lựa chọn tốt hơn
Nên nói thẳng, vì rất nhiều lần đó mới là câu trả lời đúng: nếu bạn muốn lưu một trang web đang sống thành PDF, hãy mở trang đó và in ra PDF. Trình duyệt đã có sẵn trang đã tải, kèm ảnh, script đã chạy và bạn đã đăng nhập, nên nó bắt được những thứ mà một tệp tải lên đơn giản là không chứa.
Chuyển tệp ở đây phù hợp hơn khi bạn đã có một tệp .html tự chứa trên máy — hóa đơn nhận qua email, báo cáo do một script ghi ra, bản xuất từ một công cụ nào đó, biên nhận đã lưu — và bạn muốn một bản PDF sạch, không có phần đầu trang, chân trang và số trang mà trình duyệt tự đóng vào lề. Nó còn lặp lại được: cùng một tệp cho ra cùng một PDF, ở bất kỳ máy nào, điều mà một hộp thoại in với đủ thứ thiết lập khác nhau trên từng máy không làm được.
Còn nếu tài liệu là thứ bạn sắp viết chứ không phải đem đi chuyển đổi, Markdown bỏ qua toàn bộ chuyện này: không CSS phải quản, không tệp ảnh phải đi tìm.
Câu hỏi thường gặp
Tôi đưa một URL thay vì một tệp được không?
Không — công cụ chuyển tệp bạn tải lên. Hãy lưu trang trước (Ctrl+S / Cmd+S, chọn kiểu tệp đơn nếu trình duyệt có lựa chọn đó) rồi tải tệp ấy lên. Với trang nằm sau bước đăng nhập, tự tay lưu lại dù sao cũng là cách duy nhất để lấy được nội dung ra.
PDF của tôi ra không có định dạng gì. Chuyện gì đã xảy ra?
Gần như luôn là do tệp định dạng nằm riêng ở một tệp khác. HTML tham chiếu tới style.css, còn thứ được tải lên chỉ có HTML, nên chẳng có gì để tải. Mở tệp bằng một trình soạn thảo văn bản, chuyển CSS vào khối <style> trong <head>, rồi chuyển lại.