打印 javascript 阻止我的链接答案

【问题标题】：Print javascript block my link打印 javascript 阻止我的链接
【发布时间】：2016-05-27 13:16:52
【问题描述】：

我找到了一个打印 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>

谢谢！

【问题讨论】：

不确定您的问题但是您在 foreach 循环中插入脚本标签？？？我不是 PHP 开发人员，但我真的不明白它背后的逻辑
嗯，我的 foreach 循环在脚本之外，但我不认为这是问题所在，因为我已经这样做了，我没有遇到任何问题，php 工作得很好^^
问题在于，在每次 foreach 循环迭代中，您都在重新定义 printContent() 方法，这没有任何意义。你只能有一种方法叫做printContent()
我将 printContent() 添加到函数名称和按钮中，但我的过滤器和导航菜单仍然存在这个问题
Check this answer

标签： javascript php jquery plugins printing

【解决方案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();
}

还请检查此工作 sn-p 以供参考。

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>

【讨论】：

我对你的回答有一个小问题，隐藏/可见的可见性使我的打印与我的 div 的一页和许多其他页与空白。当我把显示无/块而不是可见性打印出来时，只创建空白页:(
我还没有测试过，但这应该可以工作body * { display: none;} .print-div * { display: block !important;}我会测试，如果有更好的方法会告诉你
还要检查我的编辑。如果您的 div 始终适合一页，这可能会有所帮助，这样只会打印第一页而不会得到其他空白页。如果这对你不起作用，请告诉我。
我这样做body{ max-height:1024px!important; overflow:hidden!important; } body * { visibility: hidden!important; } .print-div, .print-div * { visibility: visible !important; } .print-div { position: absolute; left: 0; top: 0; margin-top: 0; padding-top: 0; } 我的页面总是返回这个没有改变的link。 :((
对不起，有些东西不起作用你也可以试试这个.print-div:last-child { page-break-after: auto; }你可以在打印媒体查询中添加这个类..如果这可行，我会在答案中添加它。您还可以检查为所有元素提供边框以查看空白页中的内容，以便找到解决方案。那么html, body { height: auto; } 也可能有效。 反复试验

【解决方案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 函数存在严重问题。

此函数在 'document.body.innerHTML = ' 语句处覆盖整个 DOM。

所以，同位素的过滤器和其他 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 代码在客户端运行。 :)

【讨论】：