window.print () не генерирует PDF и не делает его загружаемым, когда мы открываем веб-сайт на телефоне под углом 2 - PullRequest
Новая
       8

window.print () не генерирует PDF и не делает его загружаемым, когда мы открываем веб-сайт на телефоне под углом 2

0 голосов
/ 05 марта 2019

Я использую метод window.print () в угловом 2, чтобы напечатать окно квитанции (Invoice) в виде PDF, оно очень хорошо работает в браузере ПК, мы можем увидеть PDF, а также загрузить егоно главная проблема заключается в том, что функция не работает в браузерах телефона, не может загрузить или сохранить PDF.Ниже мой метод downloadReceipt (): 

 downloadReciept(): void {
   var printContents, popupWin;
   printContents = document.getElementById('content').innerHTML;
   popupWin = window.open('', '_blank', 
   'top=0,left=0,height=100%,width=100%');
   popupWin.document.open();
   popupWin.document.write(`
       <html>
         <head>
         </head>

         <body onload="window.print();window.close()">${printContents} 
         </body>
       </html>`
);
popupWin.document.getElementById('hidden').style.display='block';
popupWin.document.close();
this.loading = false;


     }

Основная проблема в том, что он не работает на телефоне .... пожалуйста, помогите, есть ли другой способ загрузить счет-фактуру или HTML-окно в формеPDF в угловых 2 ???Пожалуйста, предложите.

Ответы [ 2 ]

0 голосов
/ 07 марта 2019

Привет. Я конвертировал html в pdf, используя опцию печати с нестандартным размером:

  1. Сначала проверьте, может ли версия jquery быть последней версией, не поддерживающей печать: я использую <script src="/js/jquery.min.js"></script>

  2. Если вы хотите использовать PDF с размером холста, используйте свойство size в параметрах печатного носителя, а также нулевое поле, чтобы скрыть заголовок и количество страниц: 

@media print { @page {   size:5.4cm 9.1cm; margin:0; 
page-break-after: auto;  }
Для печати нужно указать id = target_warpper1; Также скрыть другой элемент в js, используя css

HTML: 

<div id="target_warpper1_print">
    <div class="visiting-card-right">
        <div class="visiting-card-up active">Employee Id</div>
        <div class="visiting-card-down active">
            <div class="visiting-card-logo"><img src="../images/visiting-card/logo.svg" alt="Vishal Korade Logo"></div>
            <div class="visiting-card-detail">
                <div class="visiting-card-name">Vishal Korade</div>
                <div class="visiting-card-designation">Front End Developer</div>
                <div class="visiting-card-txt visiting-card-email1"><span class="card-img"><img src="../images/visiting-card/mail.svg" alt="Vishal Korade Logo"></span><span class="crad-text visiting-card-email">janhavi.vishal@gmail.com</span></div>
                <div class="visiting-card-txt visiting-card-number1"><span class="card-img"><img src="../images/visiting-card/number.svg" alt="Vishal Korade Logo"></span><span class="crad-text visiting-card-number">9769367630</span></div>
                <div class="visiting-card-txt visiting-card-skype1"><span class="card-img"><img src="../images/visiting-card/skype.svg" alt="Vishal Korade Logo"></span><span class="crad-text visiting-card-skype">test</span></div>
                <div class="visiting-card-txt visiting-card-address1"><span class="card-img"><img src="../images/visiting-card/address.svg" alt="Vishal Korade Logo"></span><span class="crad-text visiting-card-address">7 Straits View Marina One East Tower, test, 66337</span></div>
            </div>
        </div>
    </div>
    <div class="visiting-card-left">
        <div class="visiting-card-up"><img src="../images/logohome.png" alt="Vishal Korade Logo"></div>
        <div class="visiting-card-down"><img class="page-cover" src="../images/visiting-card/page-cover.svg" alt="Vishal Korade ID Page Cover"></div>
    </div>
</div>
 <div class="download-pdf" id="create_pdf" onclick="PrintElem()">Download as PDF</div>

JS:
function PrintElem(target_warpper1)
{
    var mywindow = window.open('', 'PRINT', 'height=680,width=1200,toolbars=no,scrollbars=no,status=no,resizable=no');
   // mywindow.document.writeln('<html><head><title>' + document.title  + '</title>');
    mywindow.document.writeln('</head><body >');
    mywindow.document.writeln('<link rel="stylesheet" href="/style/style.css">');
    mywindow.document.writeln('<style>');
    mywindow.document.writeln(' * { -webkit-print-color-adjust: exact !important;  color-adjust: exact !important;        }');
    mywindow.document.writeln(' body {background-color: #1f2959;}');
    mywindow.document.writeln('.card-left {background-color: #1f2959;float: left;}');
    mywindow.document.writeln('#target_warpper1 {display: block;width: 204px;padding-bottom: 0px;float: none;margin: 0 auto;}');
    mywindow.document.writeln('.visiting-card-right {width: 204px; float: none; margin: 0px auto; }');
    mywindow.document.writeln('.visiting-card-left { width: 204px;float: none; margin: 25px auto 0;}');
    mywindow.document.writeln('#target_warpper1_print { display: block;width: 204px;padding-bottom: 0px;margin-right:0px;float: none;margin: 0 auto; }');
    mywindow.document.writeln(' .visiting-card-up, .visiting-card-down::after, .visiting-card-down::before, .visiting-measure  { display:none;}');
    mywindow.document.writeln(' @media print { @page {   size:5.4cm 9.1cm; margin:0;  page-break-after: auto;  }  html, body {  height: 99%;} .print:last-child { page-break-after: auto;}  }');
    mywindow.document.writeln('</style>');
    mywindow.document.writeln(document.getElementById('target_warpper1').innerHTML);
    mywindow.document.writeln('</body></html>');
    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/
    $(mywindow).load(function(){
       mywindow.print();
        mywindow.close();
    });
    return true;
}

, если вам нужна дополнительная информация, дайте мне знать.

0 голосов
/ 05 марта 2019

используйте этот код, приятель 

const printContent = document.getElementById("componentID");
const WindowPrt = window.open('', '', 'left=0,top=0,width=900,height=900,toolbar=0,scrollbars=0,status=0');
WindowPrt.document.write(printContent.innerHTML);
WindowPrt.document.close();
WindowPrt.focus();
WindowPrt.print();
WindowPrt.close();
...