从身体打印选定的部分[重复]答案

【问题标题】：Print selected part from body [duplicate]从身体打印选定的部分[重复]
【发布时间】：2019-06-08 05:45:13
【问题描述】：

我想打印只包含所选部分的正文

点击此方法页面对齐方式发生变化

//应用程序

<div class="header">
    <ul>
        <li>Home</li>
        <li>Page</li>
        <li>Contact</li>
    </ul>
</div>
<div id="payment-receipt">
    <div>
        <p>Price$24.78</p>
        <p>Product Status About to reach </p>
    </div>
</div>

//js

 printDiv() {
     //Get the HTML of div
     var divElements = document.getElementById('payment-receipt').innerHTML;
     //Get the HTML of whole page
     var oldPage = document.body.innerHTML;
     //Reset the page's HTML with div's HTML only
     document.body.innerHTML = "<html><head><title></title></head><body>" + divElements + "</body>";
     //Print Page
     window.print();
     //Restore orignal HTML
     document.body.innerHTML = oldPage;  
}

点击前和点击方法后的对齐方式应该保持不变

【问题讨论】：

我认为最好通过使用css样式进行打印来解决这个问题
查看stackoverflow.com/questions/468881/…
使用@media print

标签： javascript html

【解决方案1】：

您可以使用print stylesheet 这样做

@media print{
  /* hide this element on media print */
  .header{
    display:none;
  }
}

<div class="header">
  <ul>
    <li>Home</li>
    <li>Page</li>
    <li>Contact</li>
  </ul>
</div>
<div id="payment-receipt">
   <div>
      <p>Price$24.78</p>
      <p>Product Status About to reach </p>
   </div>
</div>

【讨论】：

【解决方案2】：

<div class="header">
  <ul>
    <li>Home</li>
    <li>Page</li>
    <li>Contact</li>
  </ul>
</div>
<div id="payment-receipt" name='clickf'>
   <div>
      <p>Price$24.78</p>
      <p>Product Status About to reach </p>
   </div>
</div>

使用 javascript no jquery 打印所选部分

var el = document.getElementById('payment-receipt');
if(el){
  el.addEventListener('click', print_div, false);
}

function print_div(){
    var content = document.getElementById('payment-receipt').innerHTML;
    var mywindow = window.open();
    mywindow.document.write('<html><head><title>Print</title></head><body >'+content+'</body></html>');
    mywindow.print();
        document.body.innerHTML =content;  
         mywindow.close();
    return true;
}

working demo

【讨论】：

【解决方案3】：

基于Younes Zaidi 的回答稍作改动：

Working Demo

var el = document.getElementById('payment-receipt');
if(el){
  el.addEventListener('click', print_div, false);
}

function print_div(){
    var content = document.getElementById('payment-receipt').innerHTML;
    var mywindow = window.open();
    mywindow.document.write('<html><head><title>Print</title></head><body >'+ window.getSelection() +'</body></html>');
    mywindow.print();
		document.body.innerHTML =content;  
    return true;
}

<div class="header">
  <ul>
    <li>Home</li>
    <li>Page</li>
    <li>Contact</li>
  </ul>
</div>
<div id="payment-receipt" name='clickf'>
   <div>
      <p>Price$24.78</p>
      <p>Product Status About to reach </p>
   </div>
</div>


<textarea id="text"></textarea>

【讨论】：

【解决方案4】：

我遇到了同样的问题 - 有一个包含用户数据的表单。我必须打印该表格，但还要防止打印不必要的数据，或者说只打印包含数据的页面的特定部分

我是怎么解决的

1.对于简单的情况 隐藏所有不需要的元素并在剩余部分调用window.print()

printForm(){

    document.getElementById('element1').style.display='None'
    document.getElementById('element2').style.display='None'
    document.getElementById('element2').style.display='None'
    window.print()
}

2。对于复杂的情况现在复杂的dom可能会出现问题，在我的情况下很简单，现在让我们看看如何在复杂的dom结构中解决同样的问题

HTML

<body>
  <div id="content">

   <!-- Content that has to be printed -->   

  </div>

  <div id="print-content">

  <!-- Will be used for printing purpose -->

  </div>
</body>

Javascript

let contentEl = document.getElementById('content')
let printEl = document.getElementById('print-content')

printEl.appencChild(contentEl.innerHtml)
contentEl.style.display = "None"

window.print()

【讨论】：