Bố cục in CSS - In trên một trang đơn

Question

Tôi bị kẹt nặng và bản lưu trữ SO không hỗ trợ tôi. Có lẽ tôi đang tìm sai chỗ. Đây là câu chuyện ngắn:

• Tôi có quan điểm rằng tôi cần in trên một trang đầy đủ. Tôi không thể có trang thứ hai và tôi cần trang đó càng lớn càng tốt trên trang.
• Giải pháp phải tương thích với nhiều trình duyệt hợp lý (IE9 +, Safari, Chrome, FF).
• Tôi đã có giải pháp PDF, nhưng tôi cũng cần một giải pháp in vani đơn giản.
• Trang được tạo bằng Bootstrap, nhưng tôi đã ghi đè hầu hết các lớp cho In.

Cấu trúc của trang HTML như sau. Tôi đã bỏ qua một số CSS trực tuyến để tùy chỉnh một số thông tin này.

<div class="container"> 
    <div class="row"> 
    <div class="span16"> 

     <style type="text/css" media="all"> 
     @media print { 
      html, body { 
      margin: 0; 
      padding: 0; 
      background: #FFF; 
      font-size: 9.5pt; 
      } 
      .container, .container div { 
      width: 100%; 
      margin: 0; 
      padding: 0; 
      } 
      .template { overflow: hidden; } 
      img { width: 100%; } 
     } 
     </style> 

     <div class="template_holder"> 
     <div class="template"> 
      <img src="some_big_image"> 
      <div> 
      [PLAIN TEXT IN HERE, POSITION:ABSOLUTE OVER THE IMAGE] 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Tôi nhận thấy đó là một dạng kém để bao gồm CSS trực tuyến tại đây, nhưng phải ghi đè lên một loạt CSS khác trước đó vì nhiều lý do. Tôi có thể kéo nó ra, nhưng ý chính của nó là thế này. Khi tôi in, tôi nhận được một cái gì đó có vẻ đúng, cộng với một trang thứ hai thêm. Khi tôi thu nhỏ hình ảnh xuống, mọi thứ đều ổn, nhưng tôi cần hình ảnh để lấp đầy DIV.

Tôi nghĩ chiều rộng thiết lập là 100% là vấn đề, nhưng tôi đảm bảo tỷ lệ cỡ ảnh nhỏ hơn trang (ngay cả với bất kỳ lề nào). Về cơ bản, hình ảnh ở độ rộng đầy đủ sẽ không gây ra ngắt trang. Tôi đang làm gì sai & Tôi cần thay đổi điều gì? Bất kỳ trợ giúp nào được đánh giá cao ...

Answer 1

Tôi nghĩ rằng sự thất vọng với chi tiết này của CSS là câu trả lời phải được điều chỉnh cho dự án của riêng tôi. Nhờ @blahdiblah và các đề xuất khác. Một kết hợp các giải pháp dẫn đến kết quả gần như hoàn hảo, mặc dù tất nhiên IE vẫn mang lại cho tôi các vấn đề ...

Nó phải thực hiện với việc thiết lập lại tất cả các kiểu đệm/lề và sau đó là rất nhiều các dấu mốc, chiều rộng. , chiều cao, vv Về cơ bản, tôi đã điền đầy đủ trang với chiều cao và sau đó giảm xuống 100% đối tượng rộng. Kết quả là phạm vi phủ sóng tối đa trên trang 8.5x11 với không tràn tới trang thứ hai.

@media print { 
    * { margin: 0 !important; padding: 0 !important; } 
    #controls, .footer, .footerarea{ display: none; } 
    html, body { 
    /*changing width to 100% causes huge overflow and wrap*/ 
    height:100%; 
    overflow: hidden; 
    background: #FFF; 
    font-size: 9.5pt; 
    } 

    .template { width: auto; left:0; top:0; } 
    img { width:100%; } 
    li { margin: 0 0 10px 20px !important;} 
} 

Answer 2

Có vẻ như hình ảnh của bạn quá lớn. Vì hình ảnh có kích thước tùy chỉnh, tại sao không được đặt

img { height: 100%; } 

thay vì width? Điều đó ít nhất sẽ đảm bảo rằng nó không tràn qua trang thứ hai.

Cũng lưu ý rằng máy in có nhiều biến hơn trình duyệt. Bạn có thể eke ra mỗi inch cuối cùng của không gian trên máy in của bạn, nhưng người khác có thể có biên độ in ấn đáng kể khác nhau và làm hỏng tất cả các công việc khó khăn của bạn.