java 横向 打印出来_从HTML横向打印

仅旋转页面内容是不够的 . 这是一个适用于大多数浏览器(Chrome，Firefox，IE9)的CSS .

首先将主体 margin 设置为0，否则页边距将大于您在打印对话框中设置的页边距 . 同时设置 background 颜色以显示页面 .

body {

margin: 0;

background: #CCCCCC;

}

需要 margin ， border 和 background 才能显示页面 .

padding 必须设置为所需的打印边距 . 在打印对话框中，您必须设置相同的边距(在此示例中为10毫米) .

div.portrait, div.landscape {

margin: 10px auto;

padding: 10mm;

border: solid 1px black;

overflow: hidden;

page-break-after: always;

background: white;

}

A4页面尺寸为210mm x 297mm . 您需要从尺寸中减去打印边距 . 并设置页面内容的大小：

div.portrait {

width: 190mm;

height: 276mm;

}

div.landscape {

width: 276mm;

height: 190mm;

}

我用的是276mm而不是277毫米，因为不同的浏览器缩放页面有点不同 . 因此，其中一些将在两页上打印277mm高度的内容 . 第二页将为空 . 使用276mm更安全 .

我们在打印页面上不需要任何 margin ， border ， padding ， background ，因此请将其删除：

@media print {

body {

background: none;

-ms-zoom: 1.665;

}

div.portrait, div.landscape {

margin: 0;

padding: 0;

border: none;

background: none;

}

div.landscape {

transform: rotate(270deg) translate(-276mm, 0);

transform-origin: 0 0;

}

}

请注意，转换的起源是 0 0 ！景观页面的内容也必须向下移动276mm！

此外，如果您混合使用纵向和lanscape页面，IE将缩小页面 . 我们通过将 -ms-zoom 设置为1.665来修复它 . 如果您将其设置为1.6666或类似的内容，有时可能会裁剪页面内容的右边框 .

如果您需要IE8或其他旧浏览器支持，您可以使用 -webkit-transform ， -moz-transform ， filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3) . 但对于现代足够的浏览器，它不是必需的 .