我必须制作页面并将它们打印在A4'前锋'纸上
(此A4纸上的每个前锋都用于粘贴在信封的信封上)
以下是这张A4'前锋'纸的例子:
在这张A4纸上:该射程有3个前锋,柱上有8个前锋。
A4纸张尺寸:W = 210mm,H = 297mm
撞针的尺寸:W = 70mm,H = 35mm
顶部和底边距为8mm
左和右右边距是0毫米(在我的情况下)
目标:在打印时,前锋必须在框架中打印好
我该怎么做? 如何使用浏览器的“页面设置”进行独立设置?
以下是我的解决方法 它适用于导航器的“页面设置”:margin:left = right = 0,top = bottom = 8mm
function printthis(){
if (!confirm("Do you really print it?")) return false;
$('#etiquetteTableID').removeClass('etiquetteTable').addClass('etiquetteTablePrint');
window.print();
setTimeout(function () { $('#etiquetteTableID').removeClass('etiquetteTablePrint').addClass('etiquetteTableAffichage'); }, 1000);
//window.close();
}
/* A4: L=210mm, H=297mm, contient 3x8 étiquettes
Etiquette: L=70mm, H=35mm
margin: top = 8mm, bottom = 8mm
*/
/* Display */
.etiquetteTableAffichage {
border-collapse:collapse;
width: 210mm;
border:1px solid black;
/*position:absolute;
left:0px;
top:8mm;*/
}
.etiquetteTableAffichage .etiquetteTD {
border:1px solid black;
font-size: 9pt;
width: 70mm;
height : 35mm;
padding-left : 5px;
padding-right : 1px;
vertical-align: middle;
}
/* Print */
.etiquetteTablePrint {
border-collapse:collapse;
width: 210mm;
border:0px solid black;
/*position:absolute;
left:0px;
top:8mm;*/
}
.etiquetteTablePrint .etiquetteTD {
border:0px solid black;
font-size: 9pt;
width: 70mm;
height : 35mm;
padding-left : 5px;
padding-right : 1px;
vertical-align: middle;
}
html { margin: 0px; border: 0px;}
body {
margin-left : 0px;
margin-top : 0px;
margin-right : 0px;
color : black;
background-color : #OODDCE;
background : url("") no-repeat;
}
<center>
<table id="etiquetteTableID" class='etiquetteTableAffichage'>
<tr>
<td class='etiquetteTD'> <!-- 0 -->
Join Mc 1<br>
my text 1 <br>
12345 CITY <br>
00.00.00.00.00 <br>
Bâtiment n°: <B>01</B><br>
N° INUAV: <B>ABCDEF</B><br>
Lot n°: <B>TTTTTT1022</B>
</td>
<td class='etiquetteTD'> <!-- 1 -->
Join Mc 2<br>
my text 2 <br>
12345 CITY <br>
00.00.00.00.00 <br>
Bâtiment n°: <B>01</B><br>
N° INUAV: <B>ABCDEF</B><br>
Lot n°: <B>TTTTTT1022</B>
</td>
<td class='etiquetteTD'> <!-- 2 -->
Join Mc 3<br>
my text 3 <br>
12345 CITY <br>
00.00.00.00.00 <br>
Bâtiment n°: <B>01</B><br>
N° INUAV: <B>ABCDEF</B><br>
Lot n°: <B>TTTTTT1022</B>
</td>
</tr>
.....
<tr style='page-break-before: always'> <!-- if the following <td> index % 24 == 0-->
<td class='etiquetteTD'> <!-- 24 -->
.....
</tr>
</table>
非常感谢。
--------------- edit1(有SeeQue的建议)BEGIN ----------------------
(有了这个,我没有更多的东西来改变印刷课程,但它没有解决我的问题!)
<style media="print">
/* A4: L=210mm, H=297mm, contient 3x8 étiquettes
Etiquette: L=70mm, H=35mm
margin: top = 8mm, bottom = 8mm
*/
html { margin: 0px; border: 0px;}
body {
margin: 0px;
color : black;
background-color : #OODDCE;
background : url("") no-repeat;
}
/* Print */
.etiquetteTableAffichage {
border-collapse:collapse;
width: 210mm;
border:0px solid black;
/*position:absolute;
left:0px;
top:8mm;*/
}
.etiquetteTableAffichage .etiquetteTD {
border:0px solid black;
font : 9pt;
width: 70mm;
height : 35mm;
padding-left : 5px;
padding-right : 1px;
vertical-align: middle;
}
</style>
<style media="screen">
html { margin: 0px; border: 0px;}
body {
margin: 0px;
color : black;
background-color : #OODDCE;
background : url("") no-repeat;
}
/* Affichage */
.etiquetteTableAffichage {
border-collapse:collapse;
width: 210mm;
border:1px solid black;
/*position:absolute;
left:0px;
top:8mm;*/
}
.etiquetteTableAffichage .etiquetteTD {
border:1px solid black;
font : 9pt;
width: 70mm;
height : 35mm;
padding-left : 25px;
padding-right : 1px;
vertical-align: middle;
}
</style>
--------------- edit1(有SeeQue的建议)END ----------------------
答案 0 :(得分:0)
我可能会误解你的问题,但正如我所看到的,你应该在你的样式标签上使用“media”属性,而不是在打印时删除类。例如:
<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>
您可以在此处找到可能的媒体列表: w3schools docs
但您感兴趣的是“屏幕”和“打印”,您应该只使用相同的类制作两个不同的样式部分,并且在打印时应自动使用带有“打印”作为媒体的部分。 / p>
除此之外,HTML不是最精确的打印格式,并且仍取决于打印机边距(几乎每种打印机型号都不同)