Tôi gặp khó khăn khi hiểu cách hiển thị các phần tử html có kích thước chính xác khi in chúng thành khổ giấy A4.Cách lấy kích thước hiển thị chính xác khi in các phần tử html
Để minh họa cho mục đích của tôi, tôi đơn giản hóa mã của tôi đến một trang html với một bảng duy nhất màu đỏ giáp cần được 210mmx297mm (khổ giấy A4):
<!DOCTYPE html>
<html>
<head>
<style>
@page
{
size: 210mm 297mm portrait; /* Set paper size to A4 (portrait) */
}
\t \t
html, body
{
width: 210mm;
padding:0;
\t \t \t \t \t \t \t
margin: 0 auto; /* Left, right are auto for body to appear as centered on screen */ \t \t \t \t
}
html
{
background: rgb(204,204,204); /* gray client window for screen (so as to emphase the body as looking as A4 paper) */
} \t \t \t
table
{
width:100%;
height:297mm;
-moz-box-sizing: border-box;
\t \t \t
border: solid 3px red;
border-spacing:0;
border-collapse: collapse;
}
td
{
padding: 0;
text-align: center;
box-shadow: inset 0 0 0 1000px white;
}
</style>
</head>
<body>
<table><tr><td>Hello world!</td></tr></table>
</body>
</html>- Khi tôi hãy thử in bằng Firefox (49.0.2), và đặt cẩn thận tất cả các lề thành 0 và hiển thị kích thước thành 100%, tôi nhận được một bảng rõ ràng là quá khổ:
- Nếu tôi chọn 'thích ứng với trang' cho rendering kích thước, tôi nhận được một bảng mà rõ ràng là thu nhỏ quy mô:
- Tôi không may mắn hơn nếu tôi thử với Chrome (54.0.2840.87 m)
Tôi đã cố gắng để buộc kích thước 210mmx297mm tất cả các cách tròn trong css, nhưng vẫn còn một cái gì đó sai. Tôi không thể tìm ra nó là gì ... hoặc là một lỗi trong công cụ hiển thị hoặc cài đặt bị thiếu trong mã của tôi.
Note
theo ngữ cảnh Tôi đang cố gắng để tạo ra báo cáo tự động tất cả trong html + css + javascript để họ có thể dễ dàng được nhìn nhận và cuối cùng in để pdf hoặc giấy từ một trình duyệt web. Trang bìa phải được điền một số hình ảnh lên các cạnh của giấy A4.
Dưới đây là một số ví dụ hoàn chỉnh hơn:
Tôi gần như ở đó, tất cả mọi thứ hiển thị độc đáo trên màn hình (firefox + chrome) nhưng vẫn có những lề khi in (in ấn làm việc với firefox + nomargin + adaptsize chỉ ... chrome bị lỗi khi lặp lại đầu trang/chân trang của bảng khi in).
Cảm ơn câu trả lời của bạn ... tại đây chrome (Phiên bản 54.0.2840.87 m) có một số gliches cho cả trang thử nghiệm nhỏ [xem tại đây] (http://imgur.com/a/PAgy9) và cho ví dụ nhiều trang không sửa đổi đầu trang và chân trang chính xác [xem tại đây] (http://imgur.com/a/DTI42) – CitizenInsane