Question

就像我在标题中提到的那样，当我要打印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>

Answer 1

请从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（了解有关媒体查询here的信息）来定义专门用于打印的样式是合适的方法。是的，您当前的方法也许行得通，但是从长远来看，学会以正确的方式做事总是更有益处的。

Answer 2

对于Bootstrap数据表，您需要使用表行而不是'block'

这是我过去遇到的问题，并且已解决。

myPrintWindow.document.getElementById('hidden_div').style.display='table-row';

打印<div>时如何实现引导程序，其中包含另一个使用javascript隐藏的<div>

2 个答案: