Cách chuyển HTML sang PDF
Tạo PDF từ HTML hữu ích để tạo hóa đơn, báo cáo, thư, chứng chỉ — bất kỳ tài liệu nào nơi bạn muốn kiểm soát bố cục với CSS nhưng phân phối dưới dạng PDF.
Cách chuyển HTML sang PDF
- Dán HTML của bạn — nhập mã HTML của bạn, bao gồm CSS nội tuyến hoặc các thẻ
<style>, vào trình soạn thảo. Mã có thể bao gồm cấu trúc trang đầy đủ với tiêu đề, bảng, hình ảnh và kiểu. - Xem trước kết xuất — bản xem trước trực tiếp hiển thị chính xác cách PDF của bạn sẽ được kết xuất khi bạn gõ. Điều chỉnh HTML và CSS cho đến khi kết xuất khớp với mong đợi của bạn.
- Tạo và tải xuống — nhấp nút tạo để tạo PDF trong trình duyệt của bạn, sau đó tải xuống ngay tức thì.
Những gì bạn có thể tạo
- Hóa đơn và biên lai — bảng có cấu trúc với danh tính công ty, các dòng mục và tổng cộng
- Báo cáo — tài liệu được định dạng với tiêu đề, đoạn văn, biểu đồ và bảng dữ liệu
- Chứng chỉ — bố cục có kiểu cách với phông chữ tùy chỉnh, đường viền và văn bản căn giữa
- Thư — thư từ chuyên nghiệp với tiêu đề, nội dung và vùng chữ ký
- CV — bố cục được làm sạch xuất sang PDF sạch cho các đơn ứng tuyển của bạn
Mẹo về kiểu cho đầu ra PDF
Sử dụng kiểu nội tuyến hoặc thẻ <style> — các tệp kiểu bên ngoài không được tải. Đặt tất cả CSS của bạn ở dạng nội tuyến trên các phần tử, hoặc trong khối <style> của HTML.
Xác định lề trang — sử dụng @page { margin: 20mm; } trong CSS để kiểm soát khoảng trống xung quanh nội dung của bạn trong PDF.
Sử dụng các đơn vị phù hợp với in ấn — mm, cm và pt dễ đoán hơn trong PDF so với px hoặc rem. Sử dụng mm cho lề và khoảng cách phải tương ứng với kích thước vật lý.
Tránh các bố cục phụ thuộc vào cửa sổ — chiều rộng theo phần trăm và chiều rộng pixel cố định hoạt động tốt nhất. Các đơn vị liên quan đến cửa sổ (vw, vh) có thể không hoạt động như mong đợi trong PDF.
Mẹo
- Xem trước trước — luôn kiểm tra bản xem trước trực tiếp trước khi tạo. Lặp lại HTML nhanh hơn nhiều so với việc tạo lại PDF mỗi lần.
- Sử dụng base64 cho hình ảnh — chuyển hình ảnh thành Data URI base64 để đảm bảo chúng được bao gồm trong PDF. Các URL bên ngoài có thể thất bại do các hạn chế CORS.
- Giữ đơn giản — các bố cục CSS phức tạp (lưới lồng nhau, các phần tử được định vị chồng lên nhau) có thể không được kết xuất hoàn hảo. Các bố cục đơn giản hơn cho ra các PDF đáng tin cậy hơn.
- Kiểm tra ngắt trang — đối với các tài liệu nhiều trang, sử dụng
page-break-before: alwaysđể kiểm soát nơi các trang mới bắt đầu.
Câu hỏi thường gặp
PDF có bảo toàn kiểu CSS của tôi không?
Có. Trình chuyển đổi kết xuất HTML của bạn với CSS được áp dụng, bao gồm màu sắc, phông chữ, lề và bố cục. PDF trông giống như trang web được kết xuất, không phải mã nguồn thô.
Tôi có thể bao gồm hình ảnh trong PDF không?
Có. Sử dụng hình ảnh base64 (Data URI) cho các kết quả đáng tin cậy nhất. Các URL hình ảnh bên ngoài có thể hoạt động nếu chúng có thể truy cập và tương thích CORS.
HTML của tôi có được gửi đến máy chủ không?
Không. Việc chuyển đổi diễn ra hoàn toàn trong trình duyệt của bạn. Mã của bạn và PDF được tạo không bao giờ rời khỏi thiết bị của bạn.
Những tính năng CSS nào được hỗ trợ?
CSS tiêu chuẩn, bao gồm bố cục, màu sắc, phông chữ, nền, đường viền và bảng, được hỗ trợ tốt. Các chức năng nâng cao như CSS Grid, các hoạt ảnh phức tạp và một số trường hợp giới hạn của Flexbox có thể bị hạn chế.