Question

我发现了一个用于打印div的小脚本，但是当我点击打印按钮并关闭打印窗口时，我的所有下拉列表过滤器（同位素）和我的下拉菜单都无效。

点击

时没有事件

这是我的打印脚本：

    <?php 
    require_once('/connexion.php');

    $sql = "SELECT * FROM plaquettes";
    $results = $connexion->query($sql);
    $plaquettes = $results->fetchAll(PDO::FETCH_OBJ);

    $i=1; 

    $titreformat= $p->titre;

    $titreformat = enleverCaracteresSpeciaux($titreformat); 

    foreach($plaquettes as $p) { ?>

    <script type="text/javascript">

    function printContent(el){
        var restorepage<?php echo $i ?>= document.body.innerHTML;
        var printcontent<?php echo $i ?>= document.getElementById(el).innerHTML;
        document.body.innerHTML = printcontent<?php echo $i ?>;
        window.print();
        document.body.innerHTML = restorepage<?php echo $i ?>;


    }

    </script>

<?php $i++; } ?>

我的html按钮

                    <div id="mydiv<?php echo $i ?>" class="hidden_print" >
                <table class="print_header">
                    <tr>
                        <td><b>Société :</b> <?php echo $p->societe ?></td>
                        <td><img src="img/<?php echo $p->societe ?>logo.png" alt="Logo de la société"></td>
                    </tr>
                </table>
                <div >
                    <h1><?php echo $p->titre ?></h1>

                        <ul>
                            <li><b>Client :</b> <?php echo $p->client ?></li>
                            <li><b>Département :</b> <?php echo $p->departement ?></li>
                            <li><b>Domaine :</b> <?php echo $p->domaine ?></li>
                            <li><b>Année de commande : </b><?php echo $p->annee ?></li>
                            <li><b>Montant : </b><?php echo $p->montant ?>€</li>
                            <li><b>Prestations : </b><?php echo $p->prestation ?></li>
                            <li><p><b>Détails : </b><?php echo $p->detail ?></p></li>

                        </ul>
                        <aside>
                            <img src="img/<?php echo $p->image ?>" alt="Photo des prestations">
                        </aside>
                    </div>


                </div>

<button id="buttonaprime" onclick="printContent('mydiv<?php echo $i ?>')" class="buttonaprime no-print"><i class="fa fa-print" aria-hidden="true"></i> Imprimer la plaquette</button>

谢谢！

Answer 1

使用此css并在打印按钮中使用onclick="addPrintClassAndPrintDiv(divId)"。

我们正在为所有元素display:none和元素（div）创建仅.print-div类display:block用于打印屏幕。因此，只会打印类.print-div

的div

使用此css和javascript-jquery功能：

Css：

@media print {
  body * {
    display: none !important;
  }
  .print-div, .print-div * {
    display: block !important;
  }
}

Javascript函数不在php循环中：

function addPrintClassAndPrintDiv(divId) {

   //remove .print-div class from all element if any 
     $(".print-div").removeClass("print-div"); 

   //add .print-div class to that div you want to print
     $("#"+divId).addClass("print-div");

   //print 
      window.print();
}

另请查看此工作代码段以供参考。

function addPrintClassAndPrintDiv(divId) {

   //remove .print-div class from all element if any 
     $(".print-div").removeClass("print-div"); 

   //add .print-div class to that div you want to print
     $("#"+divId).addClass("print-div");

   //print 
      window.print();
}

.cntent {
  height:250px;
  width:600px;
  display:block;
  margin-bottom:15px;
  border:1px solid #000;
  padding:20px;
}

@media print {
  body * {
    display: none !important;
  }
  .print-div, .print-div * {
    display: block !important;
  }
}

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
  <div class="cntent" id="myDiv1">
    <p>
          1.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur?
    </p>
    <button onclick="addPrintClassAndPrintDiv('myDiv1')">Print</button>
  </div>
  
  <div class="cntent" id="myDiv2">
    <p>
          2.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur?
    </p>
    <button onclick="addPrintClassAndPrintDiv('myDiv2')">Print</button>
  </div>
  
  <div class="cntent" id="myDiv3">
    <p>
          3.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur?
    </p>
    <button onclick="addPrintClassAndPrintDiv('myDiv3')">Print</button>
  </div>
  
  <div class="cntent" id="myDiv4">
    <p>
          4.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur?
    </p>
    <button onclick="addPrintClassAndPrintDiv('myDiv4')">Print</button>
  </div>
  
  <div class="cntent" id="myDiv5">
    <p>
         5. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur?
    </p>
    <button onclick="addPrintClassAndPrintDiv('myDiv5')">Print</button>
  </div>
  
  <div class="cntent" id="myDiv6">
    <p>
          6.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur?
    </p>
    <button onclick="addPrintClassAndPrintDiv('myDiv6')">Print</button>
  </div>
  
  <div class="cntent" id="myDiv7">
    <p>
          7.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur?
    </p>
    <button onclick="addPrintClassAndPrintDiv('myDiv7')">Print</button>
  </div>
  
  <div class="cntent" id="myDiv8">
    <p>
          8.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur?
    </p>
    <button onclick="addPrintClassAndPrintDiv('myDiv8')">Print</button>
  </div>
  
  <div class="cntent" id="myDiv9">
    <p>
         9. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur?
    </p>
    <button onclick="addPrintClassAndPrintDiv('myDiv9')">Print</button>
  </div>
  
  <div class="cntent" id="myDiv10">
    <p>
         10. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur?
    </p>
    <button onclick="addPrintClassAndPrintDiv('myDiv10')">Print</button>
  </div>
  
  <div class="cntent" id="myDiv11">
    <p>
         11. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur?
    </p>
    <button onclick="addPrintClassAndPrintDiv('myDiv11')">Print</button>
  </div>
  
  <div class="cntent" id="myDiv12">
    <p>
         12. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur?
    </p>
    <button onclick="addPrintClassAndPrintDiv('myDiv12')">Print</button>
  </div>
  
  <div class="cntent" id="myDiv13">
    <p>
         13. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur?
    </p>
    <button onclick="addPrintClassAndPrintDiv('myDiv13')">Print</button>
  </div>
  
  <div class="cntent" id="myDiv14">
    <p>
         14. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur?
    </p>
    <button onclick="addPrintClassAndPrintDiv('myDiv14')">Print</button>
  </div>
  
  <div class="cntent" id="myDiv15">
    <p>
         15. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur?
    </p>
    <button onclick="addPrintClassAndPrintDiv('myDiv15')">Print</button>
  </div>
  
  <div class="cntent" id="myDiv16">
    <p>
        16.  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur?
    </p>
    <button onclick="addPrintClassAndPrintDiv('myDiv16')">Print</button>
  </div>
  
  <div class="cntent" id="myDiv17">
    <p>
        17.  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur?
    </p>
    <button onclick="addPrintClassAndPrintDiv('myDiv17')">Print</button>
  </div>
  
  <div class="cntent" id="myDiv18">
    <p>
        18.  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur?
    </p>
    <button onclick="addPrintClassAndPrintDiv('myDiv18')">Print</button>
  </div>
  
  <div class="cntent" id="myDiv19">
    <p>
         19. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur?
    </p>
    <button onclick="addPrintClassAndPrintDiv('myDiv19')">Print</button>
  </div>
  
  <div class="cntent" id="myDiv20">
    <p>
         20. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur?
    </p>
    <button onclick="addPrintClassAndPrintDiv('myDiv20')">Print</button>
  </div>
  
  <div class="cntent" id="myDiv21">
    <p>
         21. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur?
    </p>
    <button onclick="addPrintClassAndPrintDiv('myDiv21')">Print</button>
  </div>
  
  <div class="cntent" id="myDiv22">
    <p>
         22. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur?
    </p>
    <button onclick="addPrintClassAndPrintDiv('myDiv22')">Print</button>
  </div>
  
  <div class="cntent" id="myDiv23">
    <p>
         23. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur?
    </p>
    <button onclick="addPrintClassAndPrintDiv('myDiv23')">Print</button>
  </div>
  </body>
  </html>

Answer 2

Lahar Shah的答案很棒！接受。：）

你不必重复foreach阻止来实现javascript功能。

<?php 
require_once('/connexion.php');

$sql = "SELECT * FROM plaquettes";
$results = $connexion->query($sql);
$plaquettes = $results->fetchAll(PDO::FETCH_OBJ);

$i=1; 

$titreformat= $p->titre;

$titreformat = enleverCaracteresSpeciaux($titreformat); 

foreach($plaquettes as $p) { ?>

<script type="text/javascript">

function printContent(el){
    var restorepage<?php echo $i ?>= document.body.innerHTML;
    var printcontent<?php echo $i ?>= document.getElementById(el).innerHTML;
    document.body.innerHTML = printcontent<?php echo $i ?>;
    window.print();
    document.body.innerHTML = restorepage<?php echo $i ?>;


}

</script>
<?php $i++; } ?>

只需在下面声明您的功能一次。（el参数指向div打印）

<?php 
require_once('/connexion.php');

$sql = "SELECT * FROM plaquettes";
$results = $connexion->query($sql);
$plaquettes = $results->fetchAll(PDO::FETCH_OBJ);

$i=1; 

$titreformat= $p->titre;

$titreformat = enleverCaracteresSpeciaux($titreformat); 
?>
<script type="text/javascript">
function printContent(el){
    var restorepage = document.body.innerHTML;
    var printcontent = document.getElementById(el).innerHTML;
    document.body.innerHTML = printcontent;
    window.print();
    document.body.innerHTML = restorepage ;
}
</script>

您的代码应该有效。

但是，printContent函数存在严重问题。

这个函数覆盖整个DOM的文档.body.innerHTML =＆＃39;言。

所以，同位素的过滤器和其他javascript事件处理程序都没了！

通常很多javascript库在DOM就绪时初始化事件/效果，并立即加载HTML DOM！

好的，您可以选择两个选项。

首先，使用iframe打印您想要的部分DIV。像..

function printContent(el) {
  var iframe = document.createElement('iframe');
  iframe.id = 'printFrame';
  iframe.src='about:blank';

  document.body.appendChild(iframe); 
  iframe.contentDocument.body.innerHTML = document.getElementById(el).innerHTML;
  setTimeout(function() { // for IE
    iframe.contentWindow.focus();
    iframe.contentWindow.print();
    document.body.removeChild(iframe);
  });
}

秒。打印后再次初始化（如jquery，isotope，...等）。（不推荐）

function printContent(el){
    var restorepage = document.body.innerHTML;
    var printcontent = document.getElementById(el).innerHTML;
    document.body.innerHTML = printcontent;
    window.print();
    document.body.innerHTML = restorepage;
    // now re-initialize again
    ...
}

祝你好运！请记住PHP代码在服务器端运行，JavaScript代码在客户端运行。：）

打印javascript阻止我的链接

2 个答案: