Question

我有一个打印按钮，代码如下：

<script type="text/javascript"> \\this hides the print & close buttons while printing
function printpage() {
    //Get the print button and put it into a variable
    var printButton = document.getElementById("print");
    var closeButton = document.getElementById("close");
    //Set the print button visibility to 'hidden' 
    printButton.style.visibility = 'hidden';
    closeButton.style.visibility = 'hidden';
    //Print the page content
    window.print()
    //Set the print button to 'visible' again 
    //[Delete this line if you want it to stay hidden after printing]
    printButton.style.visibility = 'visible';
    closeButton.style.visibility = 'visible';
}
</script>
      <button type="button" id="print" class="btn btn-danger" onclick="printpage()">Print</button>

      <button type="button" id="close" class="btn btn-danger" data-dismiss="modal">Close</button>

现在它可以工作并打开打印页面并隐藏按钮但是它试图打印整个页面但我只需要它来打印div部分“myModal”中的内容

我试过这个，它做了我想要的但是在活动窗口中打印X后无法关闭它，也没有按钮。我必须用F5刷新页面才能返回主窗口：< / p>

function printContent(el){
var restorepage = document.body.innerHTML;
var printcontent = document.getElementById(el).innerHTML;
document.body.innerHTML = printcontent;
window.print();
document.body.innerHTML = restorepage;
}

Answer 1

使用CSS媒体查询代替使用JavaScript：

@media print {
   #print, #close {
      display:none;
   }
}

关于仅打印#myModal，我们需要查看标记的其余部分以确定如何。

Answer 2

有一个类似的问题Here。

确保myModal是你的html元素的id。将以下代码放入任何.css文件中。

@media print {
  body * {
    visibility: hidden;
  }
  #myModal, #myModal * {
    visibility: visible;
  }
  #myModal {
    position: absolute;
    left: 0;
    top: 0;
  }
}

PHP打印仅打开窗口而不是整个屏幕

2 个答案: