javascript - 打印位于图像中的文本
问题描述
我将文本定位在图像的中心,逻辑是打印证书,并且该文本是动态生成的,这是正确的。问题出在打印时,文本在第 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" como parâmetro para impressã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 和绝对定位的盒子在它们自身、彼此和表格单元格中的嵌套应谨慎使用,因为这些构造的嵌套深度取决于打印机和实现。
这基本上说您不应该使用absolute
定位进行打印,因为每个浏览器和打印机都可能(并且将会)以不同的方式执行它(阅读,而不是您期望/想要的方式)。
您最好的选择是创建一个不使用absolute
定位的简单文档(您可以将其用于打印目的),或者使用一些第三方应用程序从该文档中创建 PDF。
推荐阅读
- powershell - 如何使用 Powershell 检查具有多个扩展名的文件?
- reactjs - 在反应中将字符串与html元素连接起来
- sql-server - 从 Laravel 调用 SQL Server SP 在 Ubuntu 上返回空
- javascript - 如何使用命令提示符安装 npm
- c++ - 正则表达式设置字符串文字的最大长度
- python - 找不到带有标签的句柄放入图例 ERROR
- c++ - 如何使用 cub::DeviceReduce::ArgMin()
- google-cloud-platform - Google Cloud Storage UI 显示“遇到内部错误”,API 调用给出致命错误
- django - 使用 Nginx、Gunicorn 和 Supervisor 部署 Django
- python - 如何在当前窗口中打开one2many记录,而不是odoo V13中的弹出窗口