Ký quỹ trong khi in trang html

Tôi đang sử dụng một tờ mẫu riêng để in. Có thể đặt lề phải và lề trái trong biểu định kiểu đặt lề in (tức là lề trên giấy).

Cảm ơn.

Bạn nên sử dụng cmhoặc mmlà đơn vị khi bạn chỉ định in. Sử dụng pixel sẽ khiến trình duyệt dịch nó sang một cái gì đó tương tự như trên màn hình. Sử dụng cmhoặc mmsẽ đảm bảo kích thước phù hợp trên giấy.

body
{
  margin: 25mm 25mm 25mm 25mm;
}

Đối với kích thước phông chữ, sử dụng ptcho phương tiện in.

Lưu ý rằng việc đặt lề trên thân máy theo kiểu css sẽ không điều chỉnh lề trong trình điều khiển máy in xác định vùng có thể in của máy in hoặc lề do trình duyệt kiểm soát (có thể được điều chỉnh trong bản xem trước in trên một số trình duyệt) ... sẽ chỉ đặt lề trên tài liệu bên trong vùng có thể in.

Bạn cũng nên lưu ý rằng IE7 ++ tự động điều chỉnh kích thước để phù hợp nhất và khiến mọi thứ bị sai ngay cả khi bạn sử dụng cmhoặc mm. Để ghi đè hành vi này, người dùng phải chọn 'Xem trước bản in' và sau đó đặt kích thước in thành 100%(mặc định là Shrink To Fit).

Một tùy chọn tốt hơn để kiểm soát hoàn toàn các lề in là sử dụng @pagechỉ thị để đặt lề giấy, điều này sẽ ảnh hưởng đến lề trên giấy bên ngoài phần tử thân html, thường được trình duyệt kiểm soát. Xem http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html .
Điều này hiện đang hoạt động trong tất cả các trình duyệt chính trừ Safari.
Trong Internet explorer, lề thực sự được đặt thành giá trị này trong cài đặt cho lần in này và nếu bạn thực hiện Xem trước, bạn sẽ nhận được mặc định này, nhưng người dùng có thể thay đổi nó trong bản xem trước.

@page  
{ 
    size: auto;   /* auto is the initial value */ 

    /* this affects the margin in the printer settings */ 
    margin: 25mm 25mm 25mm 25mm;  
} 

body  
{ 
    /* this affects the margin on the content before sending to printer */ 
    margin: 0px;  
} 

Câu trả lời liên quan: Vô hiệu hóa tùy chọn in trình duyệt (tiêu đề, chân trang, lề) khỏi trang?

Đầu tiên, tôi cố gắng buộc tất cả người dùng của mình sử dụng Chrome khi in vì các trình duyệt khác tạo bố cục khác nhau.

Một câu trả lời từ câu hỏi này khuyến nghị:

@page {
  size: 210mm 297mm; 
  /* Chrome sets own margins, we change these printer settings */
  margin: 27mm 16mm 27mm 16mm; 
}

Tuy nhiên, tôi đã kết thúc việc sử dụng CSS này cho tất cả các trang của mình sẽ được in:

@media print 
{
    @page {
      size: A4; /* DIN A4 standard, Europe */
      margin:0;
    }
    html, body {
        width: 210mm;
        /* height: 297mm; */
        height: 282mm;
        font-size: 11px;
        background: #FFF;
        overflow:visible;
    }
    body {
        padding-top:15mm;
    }
}

Trường hợp đặc biệt: Bàn dài

Khi tôi cần in một bảng trên một vài trang, cái margin:0có @pagedẫn đến các cạnh bị chảy máu:

Tôi có thể giải quyết điều này nhờ câu trả lời này với:

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group; }
tfoot { display:table-footer-group; }

Cộng với việc đặt lề trên cùng cho @page:

@page { 
    size: auto;
    margin: 20mm 0 10mm 0;
}
body {
    margin:0;
    padding:0;
}

Kết quả:

Tôi thà thích một giải pháp ngắn gọn và hoạt động với tất cả các trình duyệt. Hiện tại, tôi hy vọng thông tin trên có thể giúp một số nhà phát triển có vấn đề tương tự.

Cập nhật, giải pháp đơn giản

@media print {
   body {
       display: table;
       table-layout: fixed;
       padding-top: 2.5cm;
       padding-bottom: 2.5cm;
       height: auto;
   }
}

Giải pháp cũ

Tạo phần với mỗi trang và sử dụng mã dưới đây để điều chỉnh lề, chiều cao và chiều rộng.

Nếu bạn đang in khổ A4.

Sau đó, người dùng

Kích thước: 8,27in và 11,69 inch

@page Section1 {
    size: 8.27in 11.69in; 
    margin: .5in .5in .5in .5in; 
    mso-header-margin: .5in; 
    mso-footer-margin: .5in; 
    mso-paper-source: 0;
}



div.Section1 {
    page: Section1;
} 

sau đó tạo một div với tất cả nội dung của bạn trong đó.

<div class="Section1"> 
    type your content here... 
</div>

Cá nhân tôi đề nghị sử dụng một đơn vị đo lường khác hơn px. Tôi không nghĩ rằng các pixel có liên quan nhiều đến mặt in; lý tưởng nhất là bạn sử dụng:

• điểm (pt)
• centimét (cm)

Tôi chắc chắn có những người khác, và một bài viết tuyệt vời về print-css có thể được tìm thấy ở đây: Đi đến In , bởi Eric Meyer .

Tôi cũng đề nghị pt so với cm hoặc mm vì nó chính xác hơn. Ngoài ra, tôi không thể để @page hoạt động trong Chrome (phiên bản 30.0.1599,69 m) Nó bỏ qua mọi thứ tôi đặt cho lề, dù lớn hay nhỏ. Nhưng, bạn có thể làm cho nó hoạt động với lề cơ thể trên tài liệu, thật kỳ lạ.

Nếu bạn biết kích thước giấy mục tiêu, bạn có thể đặt nội dung của mình vào DIV với kích thước cụ thể đó và thêm một lề cho DIV đó để mô phỏng lề in. Thật không may, tôi không tin rằng bạn có quyền kiểm soát bổ sung đối với chức năng in ngoài việc chỉ hiển thị hộp thoại in.