Javascript 打印位于图像中的文本

我把文本放在图像的中心，逻辑是打印一个证书，这个文本是动态生成的，这是正确的。问题在于打印时，文本在第2页，图像在第1页

HTML:

< java >（Aui Eu PasSO）“DimimPress”Co o PAREA地铁对PARA印象：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();
}

摘自W3C

作者注意到，浮动、div和 放置在自身、彼此和表格单元格中的框应 必须小心使用，因为这些构造的嵌套深度是 取决于打印机和实现

这基本上是说，您不应该使用

绝对

定位进行打印，因为每个浏览器和打印机可能（也将）以不同的方式进行打印（阅读，而不是您期望/想要的方式）

---

您最好的选择是创建一个简单的文档，而不使用

绝对定位（您可以用于打印），或者使用一些第三方应用程序从该文档中创建PDF。
猜测您的样式表与
媒体=“screen”
链接。例如：


如果您拥有的CSS同时适用于打印和屏幕，您只需删除
媒体
属性，如：


要在“全局”样式表中定义特定于打印的样式，请在

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

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


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 {
    .print-only-styles-here {...}
}