Chuyển HTML sang PDF

Trang được phép truy cập những gì, và CSS kiểm soát những gì

Quá trình chuyển đổi không có quyền truy cập mạng và không chạy script, và cả hai đều là quyết định bảo mật chứ không phải tính năng còn thiếu. Một bộ chuyển đổi tải bất cứ thứ gì trang được gửi lên yêu cầu sẽ dễ dàng bị lợi dụng để trỏ tới những địa chỉ chỉ máy chủ của chúng tôi thấy được, và một bộ chuyển đổi chạy script thì đang chạy code của người lạ. Vì vậy stylesheet liên kết tới CDN sẽ không được tải, ảnh có địa chỉ web thông thường không hiện, web font bị âm thầm thay thế, và trang tự vẽ bằng JavaScript sẽ được chuyển đổi theo đúng những gì mã HTML có trước khi bất cứ thứ gì chạy. Cách khắc phục luôn giống nhau: đưa CSS vào trong một khối style và nhúng ảnh dưới dạng data URI. Trình duyệt có sẵn tính năng này — “Save Page As → Web Page, Complete” trong Firefox, hoặc “Save as MHTML” — và một trang đã lưu thành một file duy nhất sẽ được chuyển đổi trung thực.

CSS in mới thực sự quyết định kết quả, và đó là điều thứ hai đáng biết. Trang được dàn như khi in, nên khối @media print có hiệu lực còn stylesheet thông thường cho màn hình thì có thể không — vì thế một trang có quy tắc in ẩn thanh điều hướng sẽ chuyển đổi rất đẹp, còn trang không có thì kéo theo toàn bộ khung giao diện của website. @page kiểm soát khổ giấy: kích thước, hướng giấy và lề được đọc từ đó. break-before, break-after và break-inside: avoid quyết định chỗ chia trang, nên một bảng không được tách đôi hay một phần phải bắt đầu ở trang mới hoàn toàn nằm trong tầm kiểm soát của bạn.

Nền là thứ kinh điển hay bị bỏ sót. Trình duyệt mặc định không in màu nền và ảnh nền, nên một phần đầu trang màu tối có thể ra màu trắng trừ khi stylesheet có -webkit-print-color-adjust: exact — chỉ một dòng, và đó là khác biệt giữa một tài liệu mang thương hiệu và một tài liệu trơn trụi. Chữ vẫn là chữ thật, liên kết vẫn hoạt động, và tiêu đề có thể thành bookmark PDF ở những chỗ mã HTML dùng thẻ tiêu đề thật.

Nếu máy chủ của chúng tôi không truy cập được, trang sẽ báo cho bạn và dựng lại tài liệu ngay trên máy, giữ lại chữ, ảnh và bố cục đơn giản nhưng đơn giản hóa mọi thứ cần một bước dàn trang thật — trong đó có grid, flexbox, float và định vị. Tài liệu đơn giản sẽ ra gần như y hệt; tài liệu được thiết kế công phu thì không.

Khi bạn cần công cụ khác

Để chuyển một URL trực tiếp — việc mà trang này cố ý không làm — cùng bộ máy hiển thị chạy trên máy chủ của chúng tôi cũng chạy được trên máy bạn: chrome --headless --disable-gpu --print-to-pdf=out.pdf https://example.com tải trang với đầy đủ kết nối mạng, cả script lẫn mọi thứ. Đó là toàn bộ khác biệt, và là lý do để dùng nó.

Để kiểm soát thật sự phần đầu trang, chân trang, số trang và lề, WeasyPrint và Prince triển khai đúng đặc tả CSS Paged Media: đầu trang chạy từ @top-center, bộ đếm trang, chú thích cuối trang và tham chiếu chéo trỏ tới số trang. WeasyPrint miễn phí và là thứ hầu hết quy trình làm tài liệu kỹ thuật sử dụng. Chrome hầu như không hỗ trợ những thứ đó, nên một báo cáo tự động có “Trang 3 / 12” ở chân trang cần đến một trong hai công cụ này chứ không phải trang này.