打印圖像中的文字

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（在“​​ 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();
}

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" />

要在“全局”樣式表中定義特定於打印的樣式，請將其包裝在

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

或者，您可以創建另一個專門用於打印的樣式表：

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