Question

我将文本放在图像的中心，逻辑是打印证书，这个文本是动态生成的，这是正确的。问题是在打印时，文本在第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（aqui eu passo a“DivImpressao”comoparâmetroparampressão：

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();
}

Answer 1

取自W3C spec。

作者被警告说，浮动，div和绝对的嵌套在他们自己，彼此和表格单元格定位框小心使用，因为这些结构的嵌套深度是打印机和实现依赖。

基本上说你不应该使用absolute定位打印，因为每个浏览器和打印机可能（并且会）以不同的方式执行（读取，而不是您期望/想要的方式）。

您最好的选择是创建一个简单的文档而不使用absolute定位（您可以用于打印目的），或使用某些第三方应用程序从本文档中创建PDF。

Answer 2

猜测您的样式表与media="screen"相关联。喜欢：

<link rel="stylesheet" href="css/style.css" media="screen" />

如果您拥有的CSS应该适用于打印和屏幕，则只需删除media属性，如：

<link rel="stylesheet" href="css/style.css" />

在全局＆＃39;中定义特定于打印的样式。样式表，将它们包装在

中

@media screen {
    .print-only-styles-here {...}
}

或者您可以专门为打印创建第二个样式表：

<link rel="stylesheet" href="css/print.css" media="print" />

打印位于图像中的文本

2 个答案: