На моей веб-странице есть кнопка для печати выбранного содержимого с использованием метода window.print() JavaScript.Моя функция проста:
function HTMLtoPDF()
{
window.print();
}
Кнопка вызывается с onclick="HTMLtoPDF()".Странность здесь в том, что при первом вызове window.print() печатается весь контент, определенный в типе @media print (в моем файле print.css - проверьте его содержимое ниже) , за исключением для двух изображений, которые яиспользуя в качестве фона для моих флажков.Однако, когда я звоню window.print() во второй раз, все отображается правильно.Это происходит как при нажатии кнопки, так и при вызове функции window.print() на консоли Chrome: только при втором вызове все отображается правильно.
Однако, если я использую Chrome's Dev Tools -> More tools ->Rendering -> Emulate CSS media -> print, все отображается правильно сразу.
Вот PDF-файлы, созданные для 1-го и 2-го вызова:
1,Первый отпечаток (неверно)
2.Второй отпечаток (правильный)
Я думал, что проблема может заключаться в том, что window.print() выполняется слишком рано и что-то отбрасывается (так какрендеринг был слишком быстрым), поэтому я выполнил несколько тестов, добавив setTimeout() до 5000 мс (при вызове window.print()), но не повезло.
У кого-нибудь есть подсказка на это?При необходимости, конечно, я могу опубликовать часть кода JS, просто стараясь не заполнять вопрос слишком сильно, с самого начала.
print.css (курсивом обозначены 2 строки, гдеприменяются фоновые изображения):
@media print
{
* {
-webkit-transition: none !important;
transition: none !important;
}
.example-screen
{
display: none;
}
#ConteudoCentral
{
height: 99%!important;
}
.example-print
{
display: block;
}
div.topo
{
display: fixed;
margin-right:20px;
top: 0;
margin-bottom: 20px!important
}
div.rodape
{
margin-right:20px;
bottom: 0;
margin-top: 20px!important;
display: fixed;
}
@page :left
{
margin: 1cm;
}
@page :right
{
margin: 1cm;
}
@page :top
{
margin: 1cm;
}
@page :bottom
{
margin: 1cm;
}
br
{
display: block;
margin: 0px!important;
content: " ";
line-height: 0px!important;
}
#tituloOrdemServico
{
text-transform: uppercase;
margin-top: 0px;
}
.tipoDominio_pdf
{
text-transform: uppercase;
overflow-wrap: break-word;
color: #04378b!important;
font-size: 11px;
font-family: Tahoma, Verdana, Segoe, sans-serif;
-webkit-print-color-adjust: exact;
}
.periodo_pdf
{
text-transform: lowercase;
overflow-wrap: break-word;
color: #04378b!important;
font-size: 10px;
-webkit-print-color-adjust: exact;
font-family: Tahoma, Verdana, Segoe, sans-serif;
}
.dadosGerais_pdf
{
text-transform: uppercase;
overflow-wrap: break-word;
color: #000!important;
font-size: 9px;
border-bottom: 1px #000 solid;
display: block;
line-height: 9px;
margin-top: 9px;
padding-left: 5px;
padding-right: 5px;
-webkit-print-color-adjust: exact;
font-family: Tahoma, Verdana, Segoe, sans-serif;
padding-bottom: 2px;
}
.detalhes_dadosGerais_pdf
{
overflow-wrap:
break-word;
color: #000!important;
font-size: 9px;
border-bottom: 1px #000 solid;
display: block;
line-height: 9px;
margin-top: 9px;
padding-left: 5px;
padding-right: 5px;
-webkit-print-color-adjust: exact;
font-family: Tahoma, Verdana, Segoe, sans-serif;
padding-bottom: 2px;
}
.bold_pdf
{
font-weight: bold;
}
.quebraSpan
{
display: grid;
}
.barra_azul
{
background: #04378b!important;
color: #fff!important;
margin-left: 0px;
margin-right: 0px;
line-height: 17px;
border-bottom: none;
-webkit-print-color-adjust: exact;
font-family: Tahoma, Verdana, Segoe, sans-serif;
font-weight: bold;
}
.subTitulos_pdf
{
margin-top: 10px;margin-left: 10px;font-size: 9px;
}
.textRight15
{
padding-right: 15px;
text-align: right;
}
.tituloChecklist
{
vertical-align: top;
}
.checkbox_text_pdf
{
font-size: 9px;
line-height: initial;
}
.checkbox_black
{
white-space: normal;
display: inline-block;
width: 24px;
height: 24px;
margin: 0;
/*margin-top: 5%;*/
vertical-align: middle;
*background: url(../resources/imgs/ic_check_box_outline_24px_black.svg) left top no-repeat !important;*
background-size: 50% 50% !important;
cursor: pointer;
float: left;
}
.selected_black
{
*background: url(../resources/imgs/ic_check_box_24px_black.svg) left top no-repeat !important;*
background-size: 50% 50% !important;
}
.lineHeightNormal
{
line-height: normal;
}
.marginleft20
{
margin-left: 20px;
}
.marginleft10
{
margin-left: 10px;
}
.marginleft30
{
margin-left: 30px!important;
}
.marginleft0
{
margin-left: 0px;
}
.paddingright30
{
padding-right: 30px!important;
}
.marginbottom15
{
margin-bottom: 15px;
}
.empty_row
{
/*margin-top: 18px!important;*/
height: 12px;
}
.rodape_pdf
{
overflow-wrap: break-word;
color: #000!important;
font-size: 8px;
line-height: 8px;
margin-top: 8px;
padding-left: 5px;
-webkit-print-color-adjust: exact;
font-family: Tahoma, Verdana, Segoe, sans-serif;
}
.col_1_3
{
width: 200px;
}
.col_2_3
{
width: 500px;
margin-left: 15px;
}
.col_3_3
{
width: 715px;
}
.linha
{
margin-top: 9px;
display: flex;
}
}