A4

时间:2015-12-15 10:05:20

标签: html css

我必须制作页面并将它们打印在A4'前锋'纸上 (此A4纸上的每个前锋都用于粘贴在信封的信封上)
以下是这张A4'前锋'纸的例子:

enter image description here

在这张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 ----------------------

1 个答案:

答案 0 :(得分:0)

我可能会误解你的问题,但正如我所看到的,你应该在你的样式标签上使用“media”属性,而不是在打印时删除类。例如:

<style media="print">
  h1 {color:#000000;}
  p {color:#000000;}
  body {background-color:#FFFFFF;}
</style>

您可以在此处找到可能的媒体列表: w3schools docs

但您感兴趣的是“屏幕”和“打印”,您应该只使用相同的类制作两个不同的样式部分,并且在打印时应自动使用带有“打印”作为媒体的部分。 / p>

除此之外,HTML不是最精确的打印格式,并且仍取决于打印机边距(几乎每种打印机型号都不同)