我想在每张A4纸上打印3张桌子。 我的Html代码是这样的:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body,td,th {
font-family: tahoma;
color: #333333;
-webkit-print-color-adjust: exact;
}
body {
font-size:4.5mm;
margin-left: 2mm;
margin-top: 2mm;
margin-right: 2mm;
margin-bottom: 2mm;
}
@page {
width:210mm;
height:297mm;
padding:0px;
margin:0px;
-webkit-print-color-adjust: exact;
}
#container{
border:1mm #000000 solid; float:left; height:80mm;
width:195mm; margin-bottom:2mm;
}
-->
</style>
</head>
<body>
<div id="container">Some Text
<div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
<div align="left" style="float:left; width:100%" id="namekhoda">
<div align="center" style="width:33%; float: left">Text</div>
<div style="width:33%; float:left" align="center"></div>
</div>
</div>
<div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
</div>
</div>
<div id="container">Some Text
<div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
<div align="left" style="float:left; width:100%" id="namekhoda">
<div align="center" style="width:33%; float: left">Text</div>
<div style="width:33%; float:left" align="center"></div>
</div>
</div>
<div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
</div>
</div>
<div id="container">Some Text
<div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
<div align="left" style="float:left; width:100%" id="namekhoda">
<div align="center" style="width:33%; float: left">Text</div>
<div style="width:33%; float:left" align="center"></div>
</div>
</div>
<div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
</div>
</div>
<div id="container">Some Text
<div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
<div align="left" style="float:left; width:100%" id="namekhoda">
<div align="center" style="width:33%; float: left">Text</div>
<div style="width:33%; float:left" align="center"></div>
</div>
</div>
<div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
</div>
</div>
<div id="container">Some Text
<div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
<div align="left" style="float:left; width:100%" id="namekhoda">
<div align="center" style="width:33%; float: left">Text</div>
<div style="width:33%; float:left" align="center"></div>
</div>
</div>
<div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
</div>
</div>
<div id="container">Some Text
<div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
<div align="left" style="float:left; width:100%" id="namekhoda">
<div align="center" style="width:33%; float: left">Text</div>
<div style="width:33%; float:left" align="center"></div>
</div>
</div>
<div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
</div>
</div>
<div id="container">Some Text
<div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
<div align="left" style="float:left; width:100%" id="namekhoda">
<div align="center" style="width:33%; float: left">Text</div>
<div style="width:33%; float:left" align="center"></div>
</div>
</div>
<div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
</div>
</div>
<div id="container">Some Text
<div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
<div align="left" style="float:left; width:100%" id="namekhoda">
<div align="center" style="width:33%; float: left">Text</div>
<div style="width:33%; float:left" align="center"></div>
</div>
</div>
<div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
</div>
</div>
<div id="container">Some Text
<div id="header" style="border-bottom:1px #000000 solid; float:left; width:99%; padding:.5%">
<div align="left" style="float:left; width:100%" id="namekhoda">
<div align="center" style="width:33%; float: left">Text</div>
<div style="width:33%; float:left" align="center"></div>
</div>
</div>
<div class="content" style="float:left; width:99%; padding:.5%; justify:justify" align="right" dir="rtl"><br />
</div>
</div>
</body>
</html>
在打印预览中,某些页面是正确的(A4页面中有3个表格),有些页面错误(A4页面中多于/少于3个页面) 我想在每个A4页面中准确打印3个表格。
对不起我的英语。
请用代码指导我。
答案 0 :(得分:0)
您是如何尝试打印的?所有浏览器可能都不支持@page
属性。您可以使用像Weasyprint
这样的HTML到PDF转换器,您可以在其中提供HTML并生成可以打印的PDF。您需要在每个表格之后执行此操作(假设表格本身小于A4表格):
<div style="page-break-after:always"></div>