Cách Chuyển Đổi HTML sang PDF (Giữ nguyên Style CSS)
Tại sao Việc Chuyển đổi HTML sang PDF hay Gặp Lỗi
Bất cứ ai từng vật lộn với một file PDF xuất ra lỗi đều hiểu nỗi đau này. Bạn chuyển đổi một file HTML và kết quả là một mớ hỗn độn với layout vỡ, font chữ thì mất, hoặc một trang trông chẳng giống gì với bản xem trước trên trình duyệt. Vấn đề không nằm ở ý tưởng, mà ở cách thực thi. Các trình kết xuất PDF khác nhau rất nhiều trong cách chúng diễn giải CSS, và hầu hết các công cụ chuyển đổi thông thường chỉ đơn giản là loại bỏ hoặc lờ đi các stylesheet trừ khi bạn ép chúng phải tuân theo. Xung đột cơ bản nằm giữa mô hình dựa trên luồng (flow-based) của HTML và mô hình dựa trên trang (page-based) của PDF. Nội dung web co giãn để vừa với một khung nhìn (viewport). Một trang PDF có kích thước cố định. Không cuộn trang, không sắp xếp lại bố cục động. Để kết nối hai thế giới này đòi hỏi một trình kết xuất hiểu được các quy tắc trang của CSS, xử lý đúng các font chữ được nhúng, và tôn trọng các layout hiện đại như flexbox và grid. Rất nhiều công cụ không làm được điều đó. Các lỗi thường gặp dễ đoán đến mức đáng buồn: Google Fonts không tải được vì trình chuyển đổi chạy offline; màu nền biến mất vì trình kết xuất mặc định ở 'chế độ in' và loại bỏ chúng để tiết kiệm mực; layout nhiều cột sụp đổ thành một cột duy nhất, trông thật thảm hại. Biết được những cạm bẫy này đã là thắng một nửa trận chiến rồi. Hướng dẫn này sẽ chỉ cho bạn cách tránh chúng, dù bạn đang sử dụng công cụ [chuyển HTML sang PDF](/convert/html-to-pdf) của CocoConvert hay tự xây dựng quy trình của riêng mình.
'Giữ nguyên Style CSS' Thực sự có nghĩa là gì
Trước khi đi sâu vào các giải pháp, hãy làm rõ 'giữ nguyên CSS' thực sự có nghĩa là gì. Styling trong bối cảnh PDF không phải là một thứ duy nhất; nó gồm bốn loại riêng biệt, và không phải tất cả chúng đều tồn tại được qua mọi phương pháp chuyển đổi. **Style trực quan** là thứ mong manh nhất. Điều này bao gồm màu sắc, đường viền, box shadow, và hình nền. Các trình kết xuất in thường mặc định ẩn nền để tiết kiệm mực. Ví dụ, trong hộp thoại in của chính Chrome, bạn phải vào sâu trong 'Cài đặt khác' và tích chọn 'Đồ họa nền' nếu không phần nền của bạn sẽ biến mất. **Typography**—họ font, độ đậm, kích thước, chiều cao dòng—sống hay chết phụ thuộc vào sự có sẵn của font chữ. Nếu font của bạn được tham chiếu bằng một URL từ xa, bất kỳ trình chuyển đổi nào không tìm nạp tài nguyên bên ngoài sẽ quay về dùng font mặc định của hệ thống. Font Inter hay Lato xinh đẹp của bạn ngay lập tức biến thành font Times New Roman nhàm chán. Cách duy nhất chắc chắn để giữ lại font chữ là nhúng chúng vào file. **Layout** là nơi mọi thứ trở nên thực sự phức tạp. Các tính năng CSS hiện đại như flexbox, CSS Grid, và định vị tuyệt đối được xử lý tốt bởi các trình kết xuất dựa trên Chromium. Nhưng các engine cũ hơn như wkhtmltopdf (sử dụng engine WebKit từ khoảng năm 2013) sẽ làm hỏng các layout hiện đại theo những cách dễ đoán và gây bực bội. **CSS dành riêng cho trang** như các quy tắc `@page`, `page-break-before`, và `break-inside: avoid` thực ra lại được hỗ trợ tốt hơn khi chuyển đổi sang PDF so với trên trình duyệt. Loại CSS này tồn tại đặc biệt cho các phương tiện phân trang. Bằng cách sử dụng các khối `@media print`, bạn có thể tạo ra các style chỉ áp dụng cho phiên bản PDF, cho phép bạn kiểm soát chi tiết mà không làm xáo trộn giao diện trang web của bạn. Biết được vấn đề styling của bạn thuộc loại nào sẽ cho bạn biết công cụ và kỹ thuật nào có khả năng khắc phục nó.
Sử dụng CocoConvert để Chuyển đổi HTML sang PDF
Công cụ [chuyển đổi HTML sang PDF](/convert/html-to-pdf) của CocoConvert chạy trên một công cụ kết xuất hiện đại dựa trên Chromium. Điều này có nghĩa là nó xử lý CSS đương đại—bao gồm flexbox, Grid, biến CSS, và các giá trị `calc()`—với độ trung thực cao. Dưới đây là cách để có được kết quả hoàn hảo. **Bước 1: Chuẩn bị file HTML của bạn.** Nếu các style của bạn nằm trong một stylesheet bên ngoài, bạn có hai lựa chọn: hoặc inline chúng bằng một thư viện như Juice, hoặc đảm bảo đường dẫn stylesheet là tương đối và được bao gồm trong file bạn tải lên. CocoConvert xử lý mỗi lần một file HTML và không tìm nạp các URL từ xa. Google Fonts hoặc các stylesheet được lưu trữ trên CDN sẽ không tải được. **Bước 2: Nhúng font chữ của bạn.** Đây là điều không thể thương lượng đối với typography tùy chỉnh. Chuyển đổi các file font của bạn sang base64 và nhúng chúng trực tiếp vào một khối `<style>` bằng cách sử dụng `@font-face`. Đúng là việc này làm tăng kích thước file, nhưng đó là cách duy nhất để đảm bảo font chữ của bạn hiển thị chính xác. Đối với một font chữ văn bản thông thường với các độ đậm regular và bold, việc này có thể làm tăng thêm 80–150 KB cho file HTML của bạn. **Bước 3: Tải lên và thiết lập các tùy chọn trang.** Sau khi tải lên, CocoConvert sẽ hiển thị các tùy chọn về kích thước trang (A4, Letter, Legal, hoặc kích thước tùy chỉnh), hướng trang và lề. Khổ A4 với lề 15mm ở tất cả các cạnh là một lựa chọn mặc định ổn định. Nếu bạn đang chuyển đổi một dashboard hoặc bảng rộng, hãy chuyển sang hướng ngang (landscape). **Bước 4: Bật đồ họa nền.** Đây là lỗi phổ biến nhất. Trong bảng tùy chọn của CocoConvert, bạn phải bật 'In nền' (Print backgrounds) lên. Nếu không, bất kỳ phần tử nào có `background-color` hoặc `background-image` sẽ hiển thị thành màu trắng trơn. **Bước 5: Tải xuống và xác minh.** Đừng chỉ liếc qua file PDF trong trình duyệt của bạn. Hãy mở nó trong một trình xem chuyên dụng như Adobe Acrobat Reader và kiểm tra xem các font chữ đã được nhúng đúng cách chưa bằng cách vào File > Properties > Fonts. Mỗi font trong danh sách phải có chữ 'Embedded Subset' bên cạnh.
Xử lý các Hạn chế: Những gì CocoConvert không thể làm
Hãy thẳng thắn về những gì CocoConvert không phải. Nó là một công cụ chuyển đổi đa năng mạnh mẽ, nhưng một số tác vụ nhất định nằm ngoài phạm vi của nó. Biết trước những hạn chế này sẽ giúp bạn không phải mất công xử lý những vấn đề không có lối thoát. **Nội dung được kết xuất bằng JavaScript.** Nếu trang của bạn được xây dựng bằng một framework như React hoặc Vue, việc tải lên file HTML nguồn sẽ không hoạt động. Trình chuyển đổi chỉ thấy HTML tĩnh, chứ không phải trang cuối cùng được tạo bởi JavaScript. Đối với các trang sử dụng nhiều JS, cách tốt nhất của bạn là trước tiên hãy lưu file HTML đã được kết xuất đầy đủ từ trình duyệt (chuột phải > Save As > Webpage, Complete) và tải lên file đó. Ngoài ra, bạn sẽ cần một công cụ trình duyệt không giao diện (headless browser) như Puppeteer. **Các yếu tố tương tác.** Form, menu thả xuống, và các trạng thái hover không có tính tương tác trong file PDF. Việc chuyển đổi ghi lại một ảnh chụp tĩnh của trạng thái mặc định của phần tử đó. Nếu một accordion đang đóng khi trang được kết xuất, nó sẽ đóng trong file PDF. Không có cách nào giải quyết việc này; đó là bản chất của PDF. **Các file rất lớn.** CocoConvert có giới hạn file 50 MB cho gói miễn phí và 200 MB cho các gói trả phí. Nghe có vẻ hào phóng, nhưng một file HTML với nhiều hình ảnh được mã hóa base64 có thể chạm đến giới hạn này nhanh một cách đáng ngạc nhiên. Một file PNG độ phân giải cao duy nhất có thể dễ dàng làm tăng thêm 3–5 MB cho kích thước file. **Các hoạt ảnh SVG phức tạp.** Các file SVG tĩnh hiển thị rất đẹp. Tuy nhiên, bất kỳ hoạt ảnh CSS hoặc SMIL nào bên trong một file SVG sẽ bị đóng băng ở khung hình đầu tiên. CocoConvert được xây dựng cho việc chuyển đổi dựa trên file một cách đơn giản. Khi bạn có một tài liệu HTML hoàn chỉnh và cần một file PDF đáng tin cậy, đó là công cụ phù hợp. Đối với các quy trình phức tạp phía máy chủ đòi hỏi thực thi JavaScript, bạn sẽ cần xem xét các công cụ lập trình như Playwright hoặc Puppeteer.
Các Kỹ thuật CSS Giúp File PDF Xuất ra Sạch hơn
Bạn có thể tự cứu mình khỏi vô số rắc rối bằng cách viết CSS có tính đến việc xuất ra PDF ngay từ đầu. Sửa lỗi sau khi đã xảy ra luôn khó hơn. **Sử dụng `@media print` cho các ghi đè dành riêng cho PDF.** Đây là vũ khí bí mật của bạn. Bọc bất kỳ quy tắc nào chỉ dành cho PDF trong một khối `@media print` để ẩn các phần tử như thanh điều hướng, loại bỏ các box shadow trông bị bẩn khi in, hoặc điều chỉnh kích thước font chữ để dễ đọc trên trang. Ví dụ: ```css @media print { nav, .sidebar { display: none; } body { font-size: 11pt; } .card { box-shadow: none; border: 1px solid #ddd; } } ``` **Kiểm soát việc ngắt trang một cách tường minh.** Đừng để trình kết xuất quyết định nơi ngắt trang. Sử dụng `break-before: page` để ép tạo một trang PDF mới trước một phần chính, và áp dụng `break-inside: avoid` cho các phần tử như bảng và hình ảnh để chúng không bị tách ra một cách khó coi qua hai trang. Điều này là hoàn toàn cần thiết cho các báo cáo trông chuyên nghiệp. **Đặt kích thước `@page` một cách tường minh.** Nếu bạn biết kích thước trang mục tiêu, hãy khai báo nó trong CSS của bạn. Điều này ngăn chặn sự không khớp giữa các style của bạn và cài đặt của trình chuyển đổi, có thể gây ra việc cắt xén văn bản không mong muốn. ```css @page { size: A4 portrait; margin: 15mm 20mm; } ``` **Tránh các đơn vị viewport trong layout in.** Các đơn vị như `vw` và `vh` là vô nghĩa đối với một trang PDF có kích thước cố định. Đối với các phần tử cần trải rộng toàn trang, hãy sử dụng `mm`, `pt`, hoặc phần trăm thay thế. **Thử nghiệm trước với tính năng xem trước khi in của Chrome.** Trước khi bạn tải lên bất cứ thứ gì, hãy nhấn Ctrl+P (hoặc Cmd+P) và chọn 'Save as PDF' (Lưu dưới dạng PDF). Điều này cho bạn một bản xem trước tức thì sử dụng cùng một engine Chromium cung cấp năng lượng cho CocoConvert. Đó là cách nhanh nhất để lặp lại và tinh chỉnh CSS của bạn mà không lãng phí thời gian tải lên nhiều lần.
Chuyển đổi Toàn bộ Trang web (URL) và Chuyển đổi một File HTML
Cách tiếp cận để chuyển đổi một file HTML cục bộ về cơ bản là khác với việc chuyển đổi một URL trang web đang hoạt động. Bạn cần chọn đúng công cụ cho đúng công việc. **Chuyển đổi một file HTML cục bộ** là thế mạnh của công cụ [chuyển HTML sang PDF](/convert/html-to-pdf) của CocoConvert. Phương pháp này đòi hỏi một tài liệu độc lập, khép kín. Tất cả CSS phải được inline hoặc nằm trong một khối `<style>`, tất cả hình ảnh phải được mã hóa base64 hoặc được tham chiếu qua các đường dẫn tương đối trong một file ZIP, và các font chữ phải được nhúng. Hãy nghĩ về nó như việc gửi một gói hàng đã được niêm phong: mọi thứ mà trình kết xuất cần đều phải có sẵn bên trong ngay từ đầu. Điều này làm cho quá trình trở nên cực kỳ đáng tin cậy. **Chuyển đổi một trang web đang hoạt động theo URL** lại là một chuyện hoàn toàn khác. Nó đòi hỏi một công cụ có thể khởi động một phiên trình duyệt thực sự, điều hướng đến URL, đợi JavaScript thực thi và các web font tải xuống, và sau đó in ra PDF. Các công cụ như Puppeteer, Playwright, hoặc các dịch vụ như Browserless.io được thiết kế cho việc này. Cái giá phải trả là một núi phức tạp. Bạn phải đối mặt với việc xác thực, các pop-up cookie, nội dung tải lười (lazy-loaded), và tốc độ mạng không thể đoán trước. Đối với hầu hết các tác vụ thông thường—tạo hóa đơn PDF từ một mẫu, xuất một báo cáo, hoặc lưu trữ một tài liệu đã được định dạng—cách tiếp cận dựa trên file đơn giản hơn và dễ dự đoán hơn nhiều. Bạn kiểm soát hoàn toàn đầu vào, vì vậy đầu ra sẽ nhất quán. Nếu bạn đang xây dựng một hệ thống tạo PDF từ dữ liệu người dùng trực tiếp, cách thực hành tốt nhất là một phương pháp kết hợp: điền dữ liệu của người dùng vào một mẫu HTML trên máy chủ của bạn, và sau đó chuyển chuỗi HTML đã được kết xuất đầy đủ đó cho một API chuyển đổi. API của CocoConvert hỗ trợ quy trình này, chấp nhận HTML trực tiếp trong một yêu cầu POST.
Xác minh Kết quả: Danh sách Kiểm tra Chất lượng PDF
Chỉ vì một file PDF trông ổn trên màn hình của bạn không có nghĩa là nó đã sẵn sàng. Trước khi bạn gửi file đó cho khách hàng hoặc xuất bản nó, hãy kiểm tra qua danh sách nhanh nhưng cực kỳ quan trọng này. **Font đã được nhúng chưa?** Mở file PDF trong Adobe Acrobat Reader và điều hướng đến File > Properties > Fonts. Mỗi font bạn đã sử dụng phải được liệt kê với ghi chú 'Embedded Subset'. Nếu một font không được nhúng, nó sẽ bị thay thế bằng một font mặc định của hệ thống trên bất kỳ máy nào không cài đặt nó, phá hỏng thiết kế của bạn. **Màu sắc có chính xác không?** CSS trên web sử dụng không gian màu RGB. Hầu hết các file PDF dành cho màn hình đều ổn với RGB. Tuy nhiên, nếu PDF dùng cho in ấn thương mại, nó có thể yêu cầu không gian màu CMYK, đây là một bước chuyển đổi riêng biệt xảy ra sau quá trình HTML-sang-PDF ban đầu. **Văn bản có thể chọn và tìm kiếm được không?** Hãy thử nhấp và kéo để chọn một dòng văn bản. Nếu bạn có thể, văn bản đó là văn bản vector thực, rất tốt cho khả năng tìm kiếm và khả năng truy cập. Nếu bạn không thể chọn nó, trình chuyển đổi có thể đã raster hóa trang thành một hình ảnh phẳng—một thảm họa đối với việc sao chép-dán, các trình đọc màn hình, và tìm kiếm văn bản. **Số trang và ngắt trang có đúng không?** Nhanh chóng cuộn qua mọi trang. Có tiêu đề nào bị mồ côi ở cuối trang không? Các bảng biểu hoặc biểu đồ có bị chia cắt ở những vị trí khó coi không? Các hình ảnh có bị tách khỏi chú thích của chúng không? **Kích thước file có hợp lý không?** Một file PDF mười trang, nhiều chữ, nên có dung lượng dưới 1 MB. Nếu nó là 15 MB, thì có gì đó không ổn. Thủ phạm thường là các hình ảnh không được nén hoặc việc raster hóa toàn bộ trang một cách vô tình. **Các siêu liên kết có hoạt động không?** Nhấp vào bất kỳ liên kết nào trong tài liệu. Một trình chuyển đổi tốt sẽ giữ lại các thẻ `<a href>` dưới dạng các liên kết có thể nhấp được trong file PDF cuối cùng. CocoConvert làm điều này theo mặc định, nhưng luôn đáng để kiểm tra. Dành ba phút cho sáu bước kiểm tra này sẽ phát hiện được 95% các vấn đề chuyển đổi trước khi chúng có thể gây rắc rối cho người khác. Đó là bước hoàn thiện cuối cùng để phân biệt một sản phẩm chuyên nghiệp với một kết quả nghiệp dư.