Распечатать содержимое диалогового окна jquery -ui с помощью @media print - PullRequest
Новая
       57

Распечатать содержимое диалогового окна jquery -ui с помощью @media print

0 голосов
/ 03 февраля 2020

Проблема заключается в создании PDF-документа с указанным c содержанием.

Содержимое этого документа генерируется динамически через javascript и имеет значение append ed (* 1034). *) в диалоге jquery -ui.

Код css @ media print требует печати div внутри диалогового окна.

Диалоговое окно извлекается событием щелчка и отображает содержимое, затем действие Ctrl + P открывает инструмент печати навигатора для отображения предварительного просмотра.

Проблема заключается в том, что содержимое печатаемого файла сохраняя только добавленную html структуру таблицы, но пропуская все символы и большую часть содержимого.

enter image description here

Это просто не работает? или я что-то упустил?

Заранее спасибо! 

$(document).ready(function(){

    $('#relatorioChecklist').append('<h3><a onclick="relatorioChecklist()">adfadfasdfas</a></h3><br>');

});


function relatorioChecklist() {

    $('#relatorioChecklist').append('<div id="myModal" class="modal"></div>');
    var str = '';
    $('#myModal').append('<div id="relatorio"><div id="cabecalho"><br><h2>Checklist Máquina</h2>'
                         +'<br><h2>ddghdh</h2><br></div><table class="tabela_checklist">'+
                '<thead><tr><th>Categoria</th><th>título da pergunta</th><th>Pergunta</th><th>Resposta</th><th>Operador</th>'+
                '<th>Bloqueio</th><th>Operador desbloq.</th></tr><thead>'+
                '<tbody>' + str + '</tbody></table><div id="rodape"><p>Assinatura supervisor: ____________________</p><p>Assinatura operador: ___________________</p>'+
                '</div></div>');
    $('#myModal').dialog({width: 900, height:1100});
    
    
}
h1 {color:red;}
p {color:blue;}

@media print {
  body * {
    visibility: hidden;
  }
  #relatorio{
      visibility: visible;
  }
}
#relatorioChecklist {
    border: 1px solid black;
}

#relatorioChecklist a {
    color: black;
    font-weight: bold;
    cursor: pointer;
}
#relatorio{
    background-color: white;
    padding:50px;
}
#cabecalho{
    text-align:center;
}
#rodape{
    padding-top: 200px;
    text-align:center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>
<div id="relatorioChecklist">

</div>

</body>
</html>
...