具有CSS样式的JavaScript打印div

我有一个WordPress站点，我想生成一个PDF，为此，我创建了一个页面，其中有一个DIV的PDF应生成。我用这个链接来帮助，但对我来说，它打破了按下按钮后的权利。
printing div content with css applied
如果我删除下面的行，它的工作，但PDF不再是样式.（因为它是在WordPress上，我有一个养育样式和自定义CSS都是有效的链接在functions.php）
在gif中，你可以看到我第一次尝试打印页面，但它不工作。在第二个场景中，我再次打印，它工作，但没有CSS。
在第一个场景中，我有链接和超时，在第二个场景中，我都注解掉了。
（https://im6.ezgif.com/tmp/ezgif-6-54e1daed3b61.gif）
我的代码：

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>
                    John Doe Company <br>
                    Company AG <br>
                    Street 30 <br>
                    1234 City <br>
                    <a href="tel:0012 345 67 89">0012 345 67 89</a><br>
                    <a href="mailto:john.doe@company.com">john.doe@company.com</a><br>
                    <a href="https://company.com">https://company.com</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>
                        John Doe
                    </p>
                </div>
        </div>
        </div>

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

当你用window.open('', ...打开一个空白窗口时，它将不会链接到你的WP样式-所有你需要在该窗口中使用的CSS都需要手动链接到写在该窗口中的<link rel="stylesheet" type="text/css" href="..."/>。
另一种不用打开新窗口就可以打印div的方法是在html中添加如下内容：

<button class="printButton" onClick='window.print()'>Drucken</button>
<style>
  @media print {
    .printButton,
    .CLASS-OR-OTHER-SELECTOR-TO-MATCH-YOUR-ORANGE-TOP-BAR,
    .ANYTHING-ELSE-THAT-YOU-DONT-WANT-ON-YOUR-PRINTOUT {
      display: none !important;
    }
  }
</style>

它将使您的按钮打印当前页面的样式，因为它是与修改只在该媒体打印声明的CSS（隐藏的顶部栏，打印按钮或任何其他你想隐藏-只需修改/添加选择器，以您的需要）

具有CSS样式的JavaScript打印div

1条答案

相关问题

热门标签

最新问答