[英]Print text positioned in image
我将文本放置在图像的中心,逻辑是打印证书,并且该文本是动态生成的,这种情况可以正确发生。 问题是在打印时,文本在第2页上,图像在第1页上
HTML:
<div id="DivImpressao">
<section id="AtestadoTecnico">
<img id="imgAtestado" src="~/Images/Site/AtestadoTecnico.png" runat="server" class="imgAtestadoTecnico" height="685" />
<div class="txtAtestadoTecnico">
<div style="text-align: justify; font-family: Ebrima; font-size: 10pt; margin-top: 20px">
//texto aqui
</div>
</div>
</section>
</div>
CSS:
#AtestadoTecnico {
width: 1014px;
height: 670px;
position: relative;
}
.imgAtestadoTecnico {
top: 0px;
bottom: 20px;
position: absolute;
}
.txtAtestadoTecnico {
top: 100px;
left: 120px;
position: absolute;
}
JavaScript(在“ DivImpressao”中添加了部分印象:
function imprimePanel(elementId) {
var printContent = document.getElementById(elementId);
var windowUrl = 'about:blank';
var uniqueName = new Date();
var windowName = 'Print' + uniqueName.getTime();
var printWindow = window.open(windowUrl, windowName, 'left=50000,top=50000,width=0,height=0');
printWindow.document.write(printContent.innerHTML);
printWindow.document.close();
printWindow.focus();
printWindow.print();
printWindow.close();
}
取自W3C spec 。
告诫作者,应谨慎使用浮点数,div和绝对定位的框在它们彼此之间以及表单元格中的嵌套,因为这些构造的嵌套深度取决于打印机和实现。
从根本上说,您不应为打印使用absolute
定位,因为每个浏览器和打印机都可能(并且会)以不同的方式(读取,而不是您期望/想要的方式)进行定位。
最好的选择是创建一个不使用absolute
定位的简单文档(您可以将其用于打印目的),或者使用某些第三方应用程序从该文档中创建PDF。
猜测样式表与media="screen"
。 喜欢:
<link rel="stylesheet" href="css/style.css" media="screen" />
如果您拥有的CSS适用于打印和屏幕,则只需删除media
属性即可,例如:
<link rel="stylesheet" href="css/style.css" />
要在“全局”样式表中定义特定于打印的样式,请将其包装在
@media screen {
.print-only-styles-here {...}
}
或者,您可以创建另一个专门用于打印的样式表:
<link rel="stylesheet" href="css/print.css" media="print" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.