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;

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

https://github.com/cognitom/paper-css似乎解决了我所有的需求。

Paper CSS for happy printing

Front-end printing solution - previewable and live-reloadable!

前端打印解决方案-预览和实时可重载!