JSFiddle - React, Tailwind, and code Playground

by mkdizajn

HTML

<div id="folha">
        <div class="container-print center">
            <div class="color-black">
                MY TEST
            </div>
            <div class="paciente color-black">
                <div><strong class="ng-binding">THATIANA NUNES ALMEIDA</strong></div>
                <div class="medplano">
                 <div class="ng-binding">Sem Pref</div>
                 <div class="ng-binding">IRB-APOSENTADOS/EX COLABORADORES</div>
                </div>
                <div class="medplano">
                  <div class="ng-binding">15/01/182018 20:46:13</div>
                  <div>TOTEM</div>
                  <div class="ng-binding">Matr:00000</div>
                </div>
            </div>
            <div class="color-black">
                <span class="circle">TRAN</span>
                <span class="circle">REC</span>
            </div>
        </div>    
        <div class="container-obs color-black">
          <div class="ng-binding"></div>      
          <div class="ng-binding">Rx e Procedimentos no receituário com CID. Fratura podemos cobrar  Consulta.Recepção: Fratura podemos cobrar Consulta.Densitometria óssea com autorização via fax 2240.1621.Procedimentos acima 300 chs, necessita de autorização. Paciente deverá apresentar lâmina de pagamento. Observar sempre validade da carteira.
          </div>      
        </div>    
 </div>

CSS

@media screen {
    #printSection{
        display: none;
    }
    .container-obs{
         display: flex;
         flex-direction: column;
    }
    .circle{
        border-radius:50%; 
        border:solid black 1px;
        padding:5px
    }
    .container-print {
         display: flex;
         padding-top:10px;
    }
    .container-print div:last-child {
      margin-left: auto;
    }
    .center {
     align-items: center;
    }
    .medplano{
         display: flex;
    }
    .medplano>div{
         margin-right: 30px;
    }
    .paciente {
         margin-left: 15px; 
    }
 }
 @media print {
    .circle{
        border-radius:50%; 
        border:solid black 1px;
        padding:5px
    }

    #printSection, #printSection * {
        display: block!important;
        -webkit-print-color-adjust: exact;
        printer-colors: exact;
        color-adjust: exact;
    }
    @page { size: auto;  margin: 0mm; }
    .container-obs{
         display: flex;
         flex-direction: column;
    }
    .container-print {
         display: flex;
         padding-top:10px;
    }
    .container-print div:last-child {
      margin-left: auto;
    }
    .center {
     align-items: center;
    }
    .medplano{
         display: flex;
    }
    .medplano>div{
         margin-right: 30px;
    }
    .paciente {
         margin-left: 15px; 
    }
 }

JavaScript

$(function() {
 var PrintDoc=function(id) {
        var printSection = document.getElementById('printSection');
        // if there is no printing section, create one
        if (!printSection) {
            printSection = document.createElement('div');
            printSection.id = 'printSection';
            document.body.appendChild(printSection);
        }
        var elemToPrint = document.getElementById(id);
        if (elemToPrint) {
                    printElement(elemToPrint);
        }
        function printElement(elem) {
            // clones the element you want to print
            var domClone = elem.cloneNode(true);
            printSection.innerHTML = '';
            printSection.appendChild(domClone);
            console.log(printSection.outerHTML)
            window.print();
        }
        if (window.matchMedia) {
                var mediaQueryList = window.matchMedia('print');
                mediaQueryList.addListener(function(mql) {
                    if (!mql.matches) {
                        afterPrint();
                    } else {
                        // before print (currently does nothing)
                    }
                });
            }

        window.onafterprint = afterPrint;
        function afterPrint() {
            // clean the print section before adding new content
              printSection.innerHTML = '';           
        }
};
PrintDoc('folha');

});