CSS in giống như màn hình

Question

Có vẻ như thực sự cần có một giải pháp dễ dàng cho điều này, nhưng cho đến nay tôi đã không thành công trong việc tìm kiếm một.

Tôi đang sử dụng Zurb Foundation và về cơ bản tôi đang tạo biểu mẫu trực tiếp lấy dữ liệu đầu vào từ biểu mẫu (ở trên) và điền vào nội dung (bên dưới) bằng angular.js. Sau đó, người dùng sẽ in trang thành tệp PDF. Tôi muốn duy trì bố cục tôi có cho nội dung bên dưới và tôi muốn ẩn biểu mẫu ở trên khi in. Zurb có quy tắc css "ẩn để in" tốt có vẻ như nó chỉ hoạt động tốt khi được áp dụng cho biểu mẫu ở trên, nhưng khi tôi chuyển đổi các bảng định kiểu in, nó về cơ bản loại bỏ tất cả CSS và trở lại xấu xí.

Đề xuất?

Answer 1

Bạn đã thử sử dụng truy vấn phương tiện CSS cho print phương tiện?

.foo { 
    height:150px; 
    width:150px; 
    background-color:#F00 // see what I did there? 
} 

.bar { 
    height:10px; 
    width:50%; 
    border-radius:5px; 
    background-color:#000 
} 

.baz { 
    width:100px; 
    height:150px; 
    background-color:#FFF; 
} 

@media screen { 
    .baz { 
     display:block; 
    } 
} 

@media print { 
    .baz { 
     display:none; 
    } 
} 

Hiện tại, chỉ một số thuộc tính của .baz được nhắm mục tiêu bởi truy vấn phương tiện. Bạn có thể thoải mái đặt bất kỳ thuộc tính nào của .baz vào trong hoặc ngoài các truy vấn. Tương tự, bạn có thể đặt tất cả thuộc tính của .baz trong truy vấn phương tiện, nhưng tôi thu thập đó không phải là những gì bạn đang tìm kiếm.

Answer 2

idk về style sheets in zurb của, và không có một ví dụ, nó rất khó để trả lời, nhưng bạn có thể sử dụng weasyprint, thư viện mã nguồn mở để chuyển đổi html/css để pdf https://github.com/Kozea/WeasyPrint

Answer 3

Những gì tôi đã làm trong các loại tình huống sử dụng một tệp riêng cho print.css.

<link rel="stylesheet" type="text/css" href="global.css" /> 
<link rel="stylesheet" type="text/css" media="print" href="print.css" /> 

Nếu trình duyệt là in ấn, các tập tin global.css sẽ được nạp đầu tiên và hơn file print.css sẽ ghi đè lên bất cứ điều gì aftewards.

Xin lưu ý rằng tất cả quy tắc background: * sẽ bị tắt trong tất cả các trình duyệt theo mặc định khi in, vì vậy một số kiểu sẽ bị xâm phạm bất kể.