使用 CSS 样式的 JavaScript 打印 div答案

【问题标题】：JavaScript print div with CSS-Style使用 CSS 样式的 JavaScript 打印 div
【发布时间】：2021-05-04 10:53:36
【问题描述】：

我有一个 WordPress 站点，我想在其中生成 PDF，为此，我创建了一个页面，其中有一个 DIV，应该从中生成 PDF。我使用此链接来提供帮助，但对我来说，它在按下按钮后立即断开。

如果我删除以下行它可以工作，但 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>
                    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>

【问题讨论】：

标签： javascript php html css wordpress

【解决方案1】：

当您使用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（隐藏的顶栏、打印按钮或您想要隐藏的任何其他内容 - 只需修改/添加选择器到您的需要）

【讨论】：

使用 HTML 中的样式标签，它可以正常工作，但现在我必须自己设置所有样式。如果我不能在 HTML div 中添加 <link rel="stylesheet" href="print.css"> 标签，我怎么能包含 WordPress 的默认主题。