我将文本放置在图像的中心,逻辑是打印证书,并且该文本是动态生成的,因此可以正确发生。问题是在打印时,文本在第2页上,图像在第1页上

javascript - 打印图像中的文字-LMLPHP

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” com的部分印象:

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

最佳答案

猜测样式表与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" />

关于javascript - 打印图像中的文字,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50222285/

10-12 12:58
查看更多