HTML sang PDF

Cách chuyển đổi HTML sang PDF trong ba bước

Đầu tiên, dán markup hoặc nhập tệp .html đã lưu. Markup nằm trong khung riêng, tách khỏi trang này nên kiểu không lẫn vào nhau. Kéo và thả tệp hoặc nhấp để chọn từ thiết bị.

Thứ hai, kiểm tra bản xem trước để đảm bảo hiển thị chính xác. Trình duyệt kết xuất markup, rồi mỗi trang PDF cuối là ảnh PNG của kết quả đó. Kết xuất ở gấp đôi kích thước cuối, khoảng 144 dpi. Đủ cho màn hình và máy in văn phòng; với in thương mại pixel sẽ lộ.

Thứ ba, nhấp Tải xuống để lưu PDF trực tiếp từ bộ nhớ. Công cụ này miễn phí và an toàn: không cần cài đặt, không cần đăng ký, và HTML không bao giờ rời tab này. Lưu ý trước: văn bản không thể chọn, Ctrl+F không tìm thấy gì trong đầu ra, và trình đọc màn hình không nhận được gì.

Khi nào ảnh là lựa chọn đúng

Chuyển thành ảnh là ý tưởng tệ cho hợp đồng cần tra cứu. Nó hiệu quả khi diện mạo trang mới là cốt lõi.

Dán markup không giống mở tệp

Nút nhập .html chỉ đọc văn bản từ tệp đó, không hơn. Stylesheet bên cạnh, logo trong ./images, phông web trong ./fonts: không gì đi kèm, vì trình duyệt không giao phần còn lại của ổ đĩa cho trang web.

Đường dẫn tương đối thất bại trong im lặng. Markup được kết xuất tại đây, không phải trong thư mục chứa tệp, nên src="logo.png" được hiểu tương đối với oxygenpdf.com rồi không tìm thấy gì. URL https:// tuyệt đối tải được nếu máy chủ trả về header CORS.

Tập lệnh không bao giờ chạy. Markup thêm theo cách này không thực thi thẻ script, nên ứng dụng một trang lưu từ trình duyệt hiển thị gần như trống. Thứ được lưu là vỏ, không phải kết quả kết xuất. Hãy sao chép DOM động từ trình kiểm tra phần tử rồi dán thay thế. Thứ đi kèm đáng tin chỉ là nội dung độc lập: khối kiểu trong tệp, thuộc tính kiểu inline, và ảnh viết dưới dạng data URI.

So sánh

Ba cách đưa HTML vào PDF, kèm hạn chế riêng của mỗi cách.

Thứ giữ được, và nơi trang bị cắt

Màu, gradient, viền, góc bo tròn, đổ bóng hộp, độ mờ, biến đổi CSS, đổ bóng văn bản, bảng, danh sách và SVG inline đều được giữ. Trình kết xuất tự vẽ lại từng hộp thay vì chụp màn hình từ hệ điều hành, nên vài hiệu ứng mới không có đối tác trực tiếp bị bỏ mà không cảnh báo: filter và blur(), mix-blend-mode, backdrop-filter, clip-path và mask.

Markup được bố trí trong viewport rộng khoảng 515 pixel, tức chiều rộng nội dung A4 tính bằng pixel CSS. Vì vậy trang đáp ứng kết xuất ở breakpoint hẹp, và quy tắc @media (min-width: 768px) không bao giờ kích hoạt. Nếu bố cục chỉ đúng trên 768 pixel, tại đây sẽ không đúng.

Ảnh cuối dài được cắt thành đoạn cao bằng trang theo khoảng cố định. Việc cắt mang tính cơ học và bỏ qua nội dung bên dưới, nên hàng bảng hoặc tiêu đề có thể nằm nửa trang này nửa trang sau. Quy tắc page-break-inside CSS không giúp được; hãy đẩy phần tử lệch qua ngưỡng bằng lề thêm hoặc miếng đệm trống. Khoảng 762 point nội dung vừa mỗi trang.

HTML không bao giờ rời tab này

Mọi bộ chuyển đổi phía máy chủ đều cần markup trên máy của họ. Hoặc dán vào biểu mẫu rồi tải lên, hoặc đưa URL rồi để trình thu thập lấy trang — với nội dung sau đăng nhập, cách thứ hai đồng nghĩa giao cả thông tin đăng nhập. Cả hai đều không phải đánh đổi dễ chịu cho màn hình đầy tên khách hàng, hay bản staging chưa phát hành.

Toàn bộ quá trình kết xuất diễn ra trong tab đang mở: trình kết xuất vẽ markup, thư viện PDF dựng trang, và tệp tải xuống ra trực tiếp từ bộ nhớ. Không có gì trên mạng mang HTML đi nơi khác. Đóng tab là mọi thứ biến mất.