就像我在标题中提到的那样，当我想打印一个 div 时遇到问题> 包含另一个带有 javaScript 的隐藏 div，bootstrap 样式消失了
在按下打印按钮之前
按下打印按钮后
<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>
最佳答案
请将 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 )来定义专门用于打印的样式是合适的方法。是的，您当前的方法可能有效，但从长远来看，学会以正确的方式做事总是更有益。
关于javascript - 如何在使用 javascript 打印 <div> 包含另一个隐藏的 <div> 时实现 Bootstrap ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51529414/