Javascript 在preivew/pdf混合页面布局中打印css/html/js
提及 和下面编辑的代码Javascript 在preivew/pdf混合页面布局中打印css/html/js,javascript,html,css,pdf,printing,Javascript,Html,Css,Pdf,Printing,提及 和下面编辑的代码 <!DOCTYPE HTML> <html> <head> <title>Untitled</title> <style> body { margin: 0; background: #CCCCCC; } div.A4 { margin: 10px auto; border: solid 1px black; display: block; pa
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style>
body {
margin: 0;
background: #CCCCCC;
}
div.A4 {
margin: 10px auto;
border: solid 1px black;
display: block;
page-break-after: always;
width: 209mm;
height: 296mm;
overflow: hidden;
background: white;
}
div.A3 {
margin: 10px auto;
border: solid 1px black;
display: block;
page-break-after: always;
width: 297mm;
height: 420mm;
overflow: hidden;
background: white;
}
div.A4landscape-parent {
width: 296mm;
height: 209mm;
}
div.A3landscape-parent {
width: 420mm;
height: 297mm;
}
div.A4landscape {
width: 296mm;
height: 209mm;
}
div.A3landscape {
width: 420mm;
height: 297mm;
}
div.content {
padding: 10mm;
}
body,
div,
td {
font-size: 13px;
font-family: Verdana;
}
@media print {
body {
background: none;
}
div.A4 {
width: 209mm;
height: 296mm;
}
div.A3 {
width: 297mm;
height: 420mm;
}
div.A4landscape {
transform: rotate(270deg) translate(-296mm, 0);
transform-origin: 0 0;
}
div.A3landscape {
transform: rotate(270deg) translate(-296mm, 0);
transform-origin: 0 0;
}
div.A4portrait,
div.A4landscape,
div.A4 {
margin: 0;
padding: 0;
border: none;
background: none;
}
div.A3portrait,
div.A3landscape,
div.A3 {
margin: 0;
padding: 0;
border: none;
background: none;
}
}
</style>
</head>
<body>
<div class="A4">
<div class="content">
A4 page in Portrait mode
</div>
</div>
<div class="A4 A4landscape-parent">
<div class="A4landscape">
<div class="content">
A4 page in Landscape mode (correctly shows horizontally in browser and prints rotated in printer)
</div>
</div>
</div>
<div class="A4">
<div class="content">
A4 page in Portrait mode
</div>
</div>
<div class="A3">
<div class="content">
A3 page in Portrait mode
</div>
</div>
<div class="A3 A3landscape-parent">
<div class="A3landscape">
<div class="content">
A3 page in Landscape mode (correctly shows horizontally in browser and prints rotated in printer)
</div>
</div>
</div>
<div class="A3">
<div class="content">
A3 page in Portrait mode
</div>
</div>
<div class="A4">
<div class="content">
A4 page in Portrait mode
</div>
</div>
<div class="A4 A4landscape-parent">
<div class="A4landscape">
<div class="content">
A4 page in Landscape mode (correctly shows horizontally in browser and prints rotated in printer)
</div>
</div>
</div>
<div class="A4">
<div class="content">
A4 page in Portrait mode
</div>
</div>
</body>
</html>
无标题
身体{
保证金：0；
背景:#中交;；
}
第A4分部{
利润率：10px自动；
边框：实心1px黑色；
显示：块；
分页符后：始终；
宽度：209毫米；
高度：296mm；
溢出：隐藏；
背景：白色；
}
第A3分部{
利润率：10px自动；
边框：实心1px黑色；
显示：块；
分页符后：始终；
宽度：297mm；
高度：420mm；
溢出：隐藏；
背景：白色；
}
第A4分册-家长{
宽度：296mm；
高度：209毫米；
}
第3分部-家长{
宽度：420mm；
高度：297mm；
}
A4区景观{
宽度：296mm；
高度：209毫米；
}
第a3分区景观{
宽度：420mm；
高度：297mm；
}
部门内容{
填料：10mm；
}
身体，
分区，
运输署{
字体大小：13px；
字体系列：Verdana；
}
@媒体印刷品{
身体{
背景：无；
}
第A4分部{
宽度：209毫米；
高度：296mm；
}
第A3分部{
宽度：297mm；
高度：420mm；
}
A4区景观{
变换：旋转（270度）平移（-296mm，0）；
变换原点：0；
}
第a3分区景观{
变换：旋转（270度）平移（-296mm，0）；
变换原点：0；
}
第A4部分港口，
A4区景观，
第A4分部{
保证金：0；
填充：0；
边界：无；
背景：无；
}
第A33分部，
第A33分部景观，
第A3分部{
保证金：0；
填充：0；
边界：无；
背景：无；
}
}
纵向模式下的A4页
横向模式下的A4页（在浏览器中正确水平显示，在打印机中旋转打印）
纵向模式下的A4页
A3页纵向模式
横向模式下的A3页面（在浏览器中正确水平显示，在打印机中旋转打印）
A3页纵向模式
纵向模式下的A4页
横向模式下的A4页（在浏览器中正确水平显示，在打印机中旋转打印）
纵向模式下的A4页