JavaScript print div with CSS-Style

I have a WordPress site where I want to generate a PDF, for this, I have created a page where there is a DIV from which the PDF should be generated. I used this link to help, but for me, it breaks right after pressing the button.

printing div content with css applied

If I delete the following line it works but then the PDF is no longer styled.
(Since it’s on WordPress, I have a parenting style and a custom CSS both are valid linked in functions.php)

In the gif, you can see that I first try to print the page but it doesn’t work. in the second s scene, I print again and it works but without CSS.

I the first scene, I have the link and the timeout in it, and in the second scene I have both commented out.

(https://im6.ezgif.com/tmp/ezgif-6-54e1daed3b61.gif)

My Code:

function PrintElem() {

    var mywindow = window.open('', 'Offerte', 'height=297mm,width=210mm');

    mywindow.document.write('<html><head><title></title>');
    // mywindow.document.write('<link rel="stylesheet" href="./print.css" type="text/css">');
    mywindow.document.write('</head><body>');
    mywindow.document.write(document.getElementById('A4').innerHTML);
    mywindow.document.write('</body></html>');
    mywindow.document.close();
    mywindow.focus();

    mywindow.print();

    // setTimeout(function(){mywindow.print();},1000);
    mywindow.close();

    return true;
}
@media print {
    .A4 {
        width: 210mm;
        height:297mm;
        border: solid 1px black;
        left: 50% -105mm;
    }

    .pdfExport {
        margin: 25mm 25mm 25mm 20mm;
        /* border: solid 1px black; */
    }

    .tableRechnung {
        border-collapse: collapse;
        border: solid 1px black;
        width: 100%
    }
}

@media screen {
    .A4 {
        width: 210mm;
        height:297mm;
        border: solid 1px black;
        left: 50% -105mm;
    }

    .pdfExport {
        margin: 25mm 25mm 25mm 20mm;
        /* border: solid 1px black; */
    }

    .tableRechnung {
        border-collapse: collapse;
        border: solid 1px black;
        width: 100%
    }
}
<div class="A4" id='A4'>
            <div class='pdfExport'>
                <div class='offerteLogo'>
                    <img src="https://example.ch/wp-content/uploads/2021/01/Web-1920-–-17.png" alt="img" width="200px" height="auto">
                </div>
                <div class='offerteAdresse'>
                    <p>
                    Peter Musterschreiner <br>
                    Musterschreinerei AG <br>
                    Landstrasse 30 <br>
                    4321 Musterdorf <br>
                    <a href="tel:071 987 65 43">071 987 65 43</a><br>
                    <a href="mailto:musterschreiner@schreinerei.ch">musterschreiner@schreinerei.ch</a><br>
                    <a href="https://schreinerei.ch">https://schreinerei.ch</a>
                    </p>
                </div>
                <div class='offerteTitel'>
                    <h4>Offerte</h4><br>
                </div>
                <div class='offerteEinleitungsText'>
                    <p>
                        Sehr geehrte Damen und Herren<br>
                        Vielen Dank für Ihre Anfrage, wir unterbreiten Ihnen gerne das gewünschte Angebot. Wir freuen uns auf Ihren Auftrag.
                    </p>
                </div>
                <div class='offerteAuflistung'>
                    <table class='tableRechnung'>
                        <!-- <thead> -->
                            <!-- <th> -->
                                <td>Leistung</td>
                                <td>Anzahl</td>
                                <td>à</td>
                                <td>Beitrag in CHF</td>
                            <!-- </th> -->
                        <!-- </thead> -->
                        <tbody>
                        
                        </tbody>
                    </table>
                </div>
                <div class='offerteAusleitungsText'>
                    <p>
                        Bei fragen sind wir gerne für Sie da.<br><br>
                        Freundliche Grüsse <br>
                        Peter Musterschreiner
                    </p>
                </div>
        </div>
        </div>

        <button onClick='PrintElem()'>Drucken</button>

105 thoughts on “JavaScript print div with CSS-Style”

Leave a Comment