Подпрограмма Javascript - печатает / но не соответствует CSS-размеру или классу печати - PullRequest
Новая
       39

Подпрограмма Javascript - печатает / но не соответствует CSS-размеру или классу печати

0 голосов
/ 28 мая 2019

У меня есть собственный плагин, в котором мне нужно, чтобы пользователь мог печатать модальное (лайтбокс) диалоговое окно. Процедура печати работает для печати материала ... НО она не соответствует CSS-размеру на странице. Например, изображение логотипа, код CSS устанавливает его для отображения в 60 на 60 пикселей. Печать дует до полного размера, который может быть любым, в зависимости от того, что пользователь загружает в свою учетную запись. СМИ не контролируются с точки зрения размера. Тем не менее, форматирование с помощью CSS-кода страницы и дескриптора документа должно отображать его так, как указано, и не отображать. ЗАЧЕМ?

Процедура также игнорирует код CSS, чтобы пропустить печать определенных разделов DIV. Это работает, если я использую windows.print, но не mywindow.print (); как видно из кода. Опять почему?

Пробовал разные вызовы для печати, включая «windows.print», который действительно пропускает разделы DIV, определенные как отсутствие печати ... он также хочет напечатать всю страницу, а не только модальное окно. На данный момент я отключил возможность печати на мобильном устройстве. Это ничего не делает вообще. 

{

    if(IsMobileCard()==false)
     {
     var mywindow = window.open('', 'PRINT', 'height=400,width=600');

     mywindow.document.write('<html><head><title>' + document.title  + '</title>');
     mywindow.document.write('</head><body >');
     mywindow.document.write('<h1>' + document.domain + '</h1>');
     mywindow.document.write(document.getElementById('modal-modalcontent' + ModalBoxId).innerHTML);
     mywindow.document.write('</body></html>');

     mywindow.document.close(); // necessary for IE >= 10
     mywindow.focus(); // necessary for IE >= 10*/

     mywindow.print();
     mywindow.close();

    }
    else
      Alert('Unavailable on Mobile');

    return true;
   //window.print(); 

}

Пример диалогового окна модального (лайтбокс) здесь: 

<div id="<?php echo 'CardModal' . $CardIndex; ?>" class="modal">'
<span class="close cursor" onclick="closeModal<?php echo $CardIndex; ?>()">&times;</span> 
<div id="modal-modalcontent<?php echo $CardIndex; ?>" class="modal-content">
<div class="modalNameArea">
  <div class="modalBusinssLogo">
  <?php
  if(strlen($LogoPath)>3)
    {
  ?>
   <img src="<?php echo $LogoPath?>" alt="Listing Photo">
  <?php
    }
   else
    { 
    ?>
     <img src = "defaultlogo.png" alt="Listing Logo"" />
    <?php
    }
   ?>
  </div>
  <div class="modalcardBusinessName-expanded"><?php echo $MemberData['BusinessName']; ?><hr /></div> 
</div>

<div class="modalConnectionGroup">
 <div class="modalConnectArea5">
 <hr>
   <div id="modal-Print" class="noPrint"><button class = "PopupButton noPrint" id="btnPrint"  onclick="SetupPrint(<?php echo $CardIndex; ?>)" >Print Card</button></div>
 </div>
</div>


<div>
<div>

Код CSS здесь: 

@media print 
{
.noPrint  { display:none; }  
}
...