时间戳

首页 > 解决方案 > 打印时如何实现引导

包含另一个隐藏的
用 javascript

javascript - 打印时如何实现引导
包含另一个隐藏的
用 javascript

问题描述

就像我在标题中提到的那样，当我想打印一个 div 时遇到问题>包含另一个隐藏的 div 和 javaScript 引导样式消失了

在按下打印按钮之前 在此处输入图像描述

按下打印按钮后 打印订单后

 <script type="text/JavaScript">
            function myPrint() {
                var myPrintContent = document.getElementById('table');
                var myPrintWindow = window.open('','','');
                myPrintWindow.document.write(myPrintContent.innerHTML);
                myPrintWindow.document.getElementById('hidden_div').style.display='block';
                myPrintWindow.document.close();
                myPrintWindow.focus();
                myPrintWindow.print();
                return false;
            }
        </script>

<div id=table>
                    <table class="table table-hover">
                        <div style="display: none;" id="hidden_div">
                            <h1>hi</h1>
                </div>
                        <thead class="table-primary">
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Nom Article</th>
                                <th scope="col">CIN du responsable</th>
                                <th scope="col">Date</th>
                                <th scope="col">Quantite</th>
                                <th class="text-center" scope="col" colspan="2" width="1%">Options</th>
                            </tr>
                        </thead>
                        <tbody class="table-light">
                    <?php while($donnees = mysqli_fetch_array($reponse3)){
                        $donnees1=mysqli_fetch_array(mysqli_query($con,"select NOM_ARTICLE from article where ID_ARTICLE = $donnees[1]"));
                        $login_cin=mysqli_fetch_array(mysqli_query($con,"select CIN from utilisateurs where ID_LOGIN = $donnees[2]"));
                        ?>
                            <tr>
                                <th scope="row"><?php echo $donnees[0];?></th>
                                <td><?php echo $donnees1[0]; ?></td>
                                <td><?php echo $login_cin[0]; ?></td>
                                <td><?php echo $donnees[3]; ?></td>
                                <td><?php echo $donnees[4]; ?></td>
                                <td><a href="effectue_achat.php?id=<?php echo $donnees[0];?>"><img src="res\images\edit-icon.svg" height="30x" title="modifier"></a></td>
                                <td><a onclick="supprimer(<?php echo $donnees[0]; ?>)" href="#"><img src="res\images\delete-icon.svg" height="30x" title="supprimer"></a></td>
                            </tr>
                    <?php
                    }?>
                    </tbody>
                    </table></div>

标签： javascripthtmlcss

解决方案

请hidden_div从table.

<div id="table">
    <div style="display: none;" id="hidden_div">
        <h1>hi</h1>
    </div>
    <table class="table table-hover">
         <thead class="table-primary">
         ......

您至少可以在打开的窗口中写入正确的标记，然后提供指向您的 CSS 文件的链接（请注意，您需要输入完整的 URL）：

<script>
    function myPrint() {
        var myPrintContent = document.getElementById('table');
        var myPrintWindow = window.open('','','');
        myPrintWindow.document.write('<html><head>');
        myPrintWindow.document.write('<link rel="stylesheet" href="http://www.yourdomain.com/your/bootstrap/css/path/your-bootstrap-theme.css">');
        myPrintWindow.document.write('</head><body>');
        myPrintWindow.document.write(myPrintContent.innerHTML);
        myPrintWindow.document.write('</body></html>');            
        myPrintWindow.document.getElementById('hidden_div').style.display = 'block';
        myPrintWindow.document.close();
        myPrintWindow.focus();
        myPrintWindow.print();
        return false;
    }
</script>

诚然，这不是打印网页的最佳方式。正如@BenRondeau 所提到的，使用（在此处@media print了解有关媒体查询的更多信息）定义专门用于打印的样式是合适的方法。是的，您当前的方法可能有效，但从长远来看，学习以正确的方式做事总是更有益。

推荐阅读