css设置打印a4,CSS设置A4纸⼤⼩。
I need simulate an A4 paper in web and allow to print this page as it is show on browser (Chrome, specifically). I set the element size to 21cm x 29.7cm, but when I send to print (or print preview) it clip my page.
我需要在web上模拟A4纸，并允许在浏览器(特别是Chrome)上打印这个页⾯。我将元素⼤⼩设置为21cm x 29.7cm，但是当我发送到print(或print preview)时，它会剪切我的页⾯。
看到这个⽣活的例⼦!
HTML
HTML
Page 1/2
Page 2/2
CSS
CSS
body {
margin: 0;
padding: 0;
background-color: #FAFAFA;
font: 12pt "Tahoma";
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.
page {
width: 21cm;
min-height: 29.7cm;
padding: 2cm;
margin: 1cm auto;
border: 1px #D3D3D3 solid;
border-radius: 5px;
background: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
padding: 1cm;
border: 5px red solid;
height: 256mm;
outline: 2cm #FFEAEA solid;
}
@page {
size: A4;
margin: 0;
}
@media print {
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
borderbox
page-break-after: always;
}
}
I think I'm forgetting something. But what would it be?
我想我忘记什么了。但是会是什么呢?
Chrome: clipping page, double page (it's just what I need it to work) Chrome：剪切页⾯，双页(这正是我需要的)
Firefox: it works perfectly.
Firefox：完美的⼯作。
IE10: believe it or not, it's perfect!
信不信由你，它太完美了!
Opera: very buggy on print preview
Opera：在打印预览版上很⿇烦。
3 个解决⽅案
#1
172
I looked into this a bit more and the actual problem seems to be with assigning initial to page width under the print media rule. It seems like in Chrome width: initial on the .page element results in scaling of the page content if no specific length value is defined for width on any of the parent elements (width: initial in this case resolves to width: auto ... but actually any value smaller than the size defined under the @page rule causes the same issue).
我进⼀步研究了这个问题，实际的问题似乎是在打印媒体规则下初始化页⾯宽度。在Chrome width中，如果没有为⽗元素的宽度定义特定的长度值(width：在本例中为initial，解析为width: auto…但实际上，任何⼩于@page规则下定义的⼤⼩的值都会导致相同的问题)。
So not only the content is now too long for the page (by about 2cm), but also the page padding will be slightly more than
the initial 2cm and so on (it seems to render the contents under width: auto to the width of ~196mm and then scale the whole content up to the width of 210mm ~ but strangely exactly the same scaling factor is applied to contents with any width smaller than 210mm).
现在不仅内容页⾯太长(约2厘⽶),⽽且页⾯填充将略⾼于最初的2厘⽶等等(这似乎呈现内容下宽度：汽车规模~ 196毫⽶的宽度，然后整个内容的宽度210毫⽶~但奇怪的是完全相同的⽐例因⼦应⽤于内容
与任何宽度⼩于210毫⽶)。
To fix this problem you can simply in the print media rule assign the A4 paper width and hight to html, body or directly to
.page and in this case avoid the initial keyword.
要解决这个问题，只需在打印媒体规则中将A4纸张宽度和⾼度指定为html、正⽂或直接指定为.page，在本例中避免初始关键字。
@page {
size: A4;
margin: 0;
}
@media print {
html, body {
width: 210mm;
height: 297mm;
}
/* ... the rest of the rules ... */
}
This seems to keep everything else the way it is in your original CSS and fix the problem in Chrome (tested in different versions of Chrome under Windows, OS X and Ubuntu).
这似乎使其他的⼀切都保持在原来的CSS中，并解决了Chrome的问题(在Windows、OS X和Ubuntu下测试了不同版本的Chrome)。
#2
24
CSS
CSS
body {
background: rgb(204,204,204);
}
page[size="A4"] {
background: white;
width: 21cm;
height: 29.7cm;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
@media print {
body, page[size="A4"] {
margin: 0;
box-shadow: 0;
}
}
HTML
HTML
演⽰
#3
15
Paper CSS for happy printing
Front-end printing solution - previewable and live-reloadable!前端打印解决⽅案-预览和实时可重载!

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。