javascript - 根据数据表html打印单独的页面

问题描述

我在如何根据国家列分隔页面时遇到问题。我想要的只是分别打印国家/地区例如美国应该在第一页打印下一个国家（例如德国）应该在第二页上自动显示或打印等等......等等......目前我只打印我的数据表一次。我怎样才能将它们分开？谁能给我一个想法或解决方案，我该如何实现这一目标？有没有专家可以帮助我，我有一个例子小提琴你可以试试提前谢谢你！

小提琴链接

html

<button class="btn btn-secondary round btn-min-width mr-1 mb-1"  onclick="printDiv();">Print</button>
<section class="users-list-wrapper">
<div class="users-list-table">
    <div class="card">
        <div class="card-content">
            <div class="card-body">
                <!-- datatable start -->
                <div class="table-responsive">

            <table  class="table" name="table" id="table">

            <thead>

            <th colspan="9">
               <div class="titles"><h3>This is Header title <br style="line-height: 20%;"><span 
               class="header2"> SubHeader title</span></h3>
                </div>  
                </th>
            <tr><th colspan="4" style="text-align: left;"> <span class="municipality">Header</span> 
            </th>
            </tr>
            <span>Hello</span> </h1>
            <tr class="heads">
                <th class="heads">No</th>
                <th width ="5%" class="heads">ID Number</th>
                <th class="heads">Name</th>
                <th width ="8%" class="heads">Country</th>
                <th class="heads">Data total</th>
               

            </tr>
            </thead>
            <tbody class="report-content">
                <tr>
                    <td></td>
                    <td>1235</td>
                    <td>Jason</td>
                    <td>Unite States</td>
                    <td class="lenss"></td>
                               
                </tr>
                <tr>
                    <td></td>
                    <td>1235</td>
                    <td>Jason</td>
                    <td>Unite States</td>
                    <td class="lenss"></td>
                               
                </tr>
                <tr>
                    <td></td>
                    <td>1235</td>
                    <td>Jason</td>
                    <td>Unite States</td>
                    <td class="lenss"></td>
                               
                </tr>
                <tr>
                    <td></td>
                    <td>1235</td>
                    <td>Jason</td>
                    <td>Unite States</td>
                    <td class="lenss"></td>
                               
                </tr>
                <tr>
                    <td></td>
                    <td>1235</td>
                    <td>Jason</td>
                    <td>Unite States</td>
                    <td class="lenss"></td>
                               
                </tr>
                <tr>
                    <td></td>
                    <td>1235</td>
                    <td>Jason</td>
                    <td>Unite States</td>
                    <td class="lenss"></td>
                               
                </tr>

                <tr>
                    <td></td>
                    <td>1235</td>
                    <td>Jason</td>
                    <td>Germany</td>
                    <td class="lenss"></td>
                               
                </tr>
                <tr>
                    <td></td>
                    <td>1235</td>
                    <td>Jason</td>
                    <td>Germany</td>
                    <td class="lenss"></td>
                               
                </tr>
                <tr>
                    <td></td>
                    <td>1235</td>
                    <td>Jason</td>
                    <td>Germany</td>
                    <td class="lenss"></td>
                               
                </tr>
                <tr>
                    <td></td>
                    <td>1235</td>
                    <td>Jason</td>
                    <td>Germany</td>
                    <td class="lenss"></td>
                               
                </tr>
                <tr>
                    <td></td>
                    <td>1235</td>
                    <td>Jason</td>
                    <td>Germany</td>
                    <td class="lenss"></td>
                               
                </tr>


                <tr>
                    <td></td>
                    <td>1235</td>
                    <td>Jason</td>
                    <td>China</td>
                    <td class="lenss"></td>
                               
                </tr>

                <tr>
                    <td></td>
                    <td>1235</td>
                    <td>Jason</td>
                    <td>China</td>
                    <td class="lenss"></td>
                               
                </tr>
                <tr>
                    <td></td>
                    <td>1235</td>
                    <td>Jason</td>
                    <td>China</td>
                    <td class="lenss"></td>
                               
                </tr>
                <tr>
                    <td></td>
                    <td>1235</td>
                    <td>Jason</td>
                    <td>China</td>
                    <td class="lenss"></td>                 
                </tr>   
            </tbody>
            </table>
            </div>
        </div>
    </div>
</div>
</section>

javascript

function printDiv() {
  let tbl = document.getElementById('table');
  let title = document.querySelector('.titles');
  let newTitle = title.cloneNode(true);
  newTitle.style.textAlign = "center";
  newTitle.style.fontWeight = "bold";
  tbl.prepend(newTitle);
  title.remove();

  var divToPrint = document.getElementById('table');

  var htmlToPrint = '' +
    '<style type="text/css">' +
   '.titles  {' +
    'font-family:Calibri, san-serif;' +
    'font-weight: 550;' +
    'font-size: 14px;' +
    '}' +

    '.municipality {' +
    'font-weight: 550;' +
    'font-family:Calibri, san-serif;' +
    'font-size: 14px;' +
    'text-align: left;' +
    
    '}' +

    '.presented  {' +
    'font-family:Calibri, san-serif;' +
    'font-weight: 550;' +
    'width:130px;' +
    'padding 5px;' +
    'font-size: 14px;' +

    '}' +


    

    '.footer  {' +
    'font-family:Calibri, san-serif;' +
    'font-weight: 550;' +
    'text-align: right;' +
    'font-size: 13px;' +
    '}' +

    '.numbers  {' +
    'font-family:Calibri, san-serif;' +
    'font-weight: 550;' +
    'text-align: left;' +
    'font-size: 13px;' +
    '}' +

 

    '.certify  {' +
    'font-family:Calibri, san-serif;' +
    'font-size: 13px;' +
    'text-align: left;' +
    'font-weight: normal;' +
    'margin-top: 15px;' +

    '}' +

    '.chief  {' +
    'font-family:Calibri, san-serif;' +
    'text-align: left;' +
    'font-weight: 550;' +
    'margin-top: 40px;' +
    'font-size: 13px;' +
    '}' +

    '.positions  {' +
    'font-family:Calibri, san-serif;' +
    'text-align: left;' +
    'font-weight: normal;' +
    'font-size: 13px;' +
    '}' +

    '.rev  {' +
    'font-family:Calibri, san-serif;' +
    'text-align: left;' +
    'font-weight: normal;' +
    'margin-top: 30px;' +
    'font-size: 13px;' +
    '}' +



    'table td,.heads {' +
    'border:1px solid #000000;' +
    'padding:5px;' +
    'font-family:Calibri, san-serif;'+
    'font-size: 14px;' +
    '}' +

    'tbody tr  {' +
    'counter-increment: noElm;' +
    '}' +

    '.lenss {' +
    'padding-left:80px;' +
    'font-size: 13px;' +
    '}' +

    'td:nth-of-type(1):before {' +
    'content: counter(noElm);' +
    '}' +

    'th:nth-of-type(1),td:nth-of-type(1) {' +
    'display: table-cell;' +
    '}' +

    'table  {' +
    'border-collapse: collapse;' +
    'width: 100%;' +
    '}' +

     '.cash  {' +
    'font-family:Calibri, san-serif;' +
    'font-weight: 550;' +
    'font-size: 14px;' +
    '}' +

    '.header2  {' +
    'font-family:Calibri, san-serif;' +
    'font-weight:normal;' +
    'font-size: 14px;' +


    '</style>';
  htmlToPrint += divToPrint.outerHTML;
  newWin = window.open("");
  newWin.document.write(htmlToPrint);
  newWin.print();
  newWin.close();
}

css

 @media screen {
 th:nth-of-type(1),
 td:nth-of-type(1) {
 display: none;
 }
 .noPrint {}

 .titles {
  display: none;
 }
 .footer,.municipality,.certify,.numbers,.chief,.positions,.rev {
 display: none;
 }
 }
@media print {
  .noPrint {
    display: none;
  }
  .title {}
  .footer {}
  }

@page{
    size: auto;
    margin: 25mm 25mm 25mm 25mm;  
}
body  
{ 
    margin: 0px;  
}

标签： javascripthtmlcssprinting

解决方案

使用您的编码等，我认为您可以这样做以在打印期间设置分页符（请注意，这不能在片段中完成，因此您必须将其复制到新的 HTML 页面中进行测试）：

SCRIPTreportpage - 每当国家/地区名称更改时，都会向tr标签添加新类：

<script type="text/javascript">

function addReportPages() {
  let lastCountry = "";
  let table = document.getElementsByClassName("report-content")[0];
  let rows = table.querySelectorAll("tr");
  rows.forEach(function(row){
    let thisCountry = row.cells[3].innerHTML;
    if (lastCountry == "") {
      lastCountry = thisCountry;
    } else if (thisCountry != lastCountry) {
      row.classList.add("reportpage");
      lastCountry = thisCountry;
    }
  })
}

window.onload = addReportPages;

</script>

CSS - 包括新的“reportpage”样式

<style type="text/css">
@media screen {
 th:nth-of-type(1),
 td:nth-of-type(1) {
 display: none;
 }
 .noPrint {}

 .titles {
  display: none;
 }
 .footer,.municipality,.certify,.numbers,.chief,.positions,.rev {
 display: none;
 }
 }
@media print {
  .noPrint {
    display: none;
  }
  .title {}
  .footer {}
  }
  
  .reportpage {
    page-break-before: always;
  }
  

@page{
    size: auto;
    margin: 25mm 25mm 25mm 25mm;  
}
body  
{ 
    margin: 0px;  
}


</style>

HTML - 我已经整理了一下，以便更清楚地看到正在发生的事情：

<table  class="table" name="table" id="table">
  <thead>
    <tr>
      <th colspan="9">
         <div class="titles"><h3>This is Header title <br style="line-height: 20%;">
          <span class="header2"> SubHeader title</span>
         </div>
      </th>
    </tr>
    <tr>
      <th colspan="4" style="text-align: left;">
        <span class="municipality">Header</span>
      </th>
    </tr>
    <tr class="heads">
        <th class="heads">No</th>
        <th width ="5%" class="heads">ID Number</th>
        <th class="heads">Name</th>
        <th width ="8%" class="heads">Country</th>
        <th class="heads">Data total</th>
    </tr>
  </thead>
  <tbody class="report-content">
    <tr><td></td><td>1235</td><td>Jason</td><td>United States</td><td class="lenss"></td></tr>
    <tr><td></td><td>1235</td><td>Jason</td><td>United States</td><td class="lenss"></td></tr>
    <tr><td></td><td>1235</td><td>Jason</td><td>United States</td><td class="lenss"></td></tr>
    <tr><td></td><td>1235</td><td>Jason</td><td>United States</td><td class="lenss"></td></tr>
    <tr><td></td><td>1235</td><td>Jason</td><td>United States</td><td class="lenss"></td></tr>
    <tr><td></td><td>1235</td><td>Jason</td><td>United States</td><td class="lenss"></td></tr>
    <tr><td></td><td>1235</td><td>Jason</td><td>Germany</td><td class="lenss"></td></tr>
    <tr><td></td><td>1235</td><td>Jason</td><td>Germany</td><td class="lenss"></td></tr>
    <tr><td></td><td>1235</td><td>Jason</td><td>Germany</td><td class="lenss"></td></tr>
    <tr><td></td><td>1235</td><td>Jason</td><td>Germany</td><td class="lenss"></td></tr>
    <tr><td></td><td>1235</td><td>Jason</td><td>Germany</td><td class="lenss"></td></tr>
    <tr><td></td><td>1235</td><td>Jason</td><td>China</td><td class="lenss"></td></tr>
    <tr><td></td><td>1235</td><td>Jason</td><td>China</td><td class="lenss"></td></tr>
    <tr><td></td><td>1235</td><td>Jason</td><td>China</td><td class="lenss"></td></tr>
    <tr><td></td><td>1235</td><td>Jason</td><td>China</td><td class="lenss"></td></tr>   
  </tbody>
</table>

我用来测试这个的整个 HTML 页面：

<!DOCTYPE html>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<html>
<head>
<title>Adding page breaks in a table</title>
    <script type="text/javascript">

    function addReportPages() {
      let lastCountry = "";
      let table = document.getElementsByClassName("report-content")[0];
      let rows = table.querySelectorAll("tr");
      rows.forEach(function(row){
        let thisCountry = row.cells[3].innerHTML;
        if (lastCountry == "") {
          lastCountry = thisCountry;
        } else if (thisCountry != lastCountry) {
          row.classList.add("reportpage");
          lastCountry = thisCountry;
        }
      })
    }

    window.onload = addReportPages;

    </script>

    <style type="text/css">
    @media screen {
     th:nth-of-type(1),
     td:nth-of-type(1) {
     display: none;
     }
     .noPrint {}

     .titles {
      display: none;
     }
     .footer,.municipality,.certify,.numbers,.chief,.positions,.rev {
     display: none;
     }
     }
    @media print {
      .noPrint {
        display: none;
      }
      .title {}
      .footer {}
      }
      
      .reportpage {
        page-break-before: always;
      }
      

    @page{
        size: auto;
        margin: 25mm 25mm 25mm 25mm;  
    }
    body  
    { 
        margin: 0px;  
    }


    </style>
</head>
<body>

    <table  class="table" name="table" id="table">
      <thead>
        <tr>
          <th colspan="9">
             <div class="titles"><h3>This is Header title <br style="line-height: 20%;">
              <span class="header2"> SubHeader title</span>
             </div>
          </th>
        </tr>
        <tr>
          <th colspan="4" style="text-align: left;">
            <span class="municipality">Header</span>
          </th>
        </tr>
        <tr class="heads">
            <th class="heads">No</th>
            <th width ="5%" class="heads">ID Number</th>
            <th class="heads">Name</th>
            <th width ="8%" class="heads">Country</th>
            <th class="heads">Data total</th>
        </tr>
      </thead>
      <tbody class="report-content">
        <tr><td></td><td>1235</td><td>Jason</td><td>United States</td><td class="lenss"></td></tr>
        <tr><td></td><td>1235</td><td>Jason</td><td>United States</td><td class="lenss"></td></tr>
        <tr><td></td><td>1235</td><td>Jason</td><td>United States</td><td class="lenss"></td></tr>
        <tr><td></td><td>1235</td><td>Jason</td><td>United States</td><td class="lenss"></td></tr>
        <tr><td></td><td>1235</td><td>Jason</td><td>United States</td><td class="lenss"></td></tr>
        <tr><td></td><td>1235</td><td>Jason</td><td>United States</td><td class="lenss"></td></tr>
        <tr><td></td><td>1235</td><td>Jason</td><td>Germany</td><td class="lenss"></td></tr>
        <tr><td></td><td>1235</td><td>Jason</td><td>Germany</td><td class="lenss"></td></tr>
        <tr><td></td><td>1235</td><td>Jason</td><td>Germany</td><td class="lenss"></td></tr>
        <tr><td></td><td>1235</td><td>Jason</td><td>Germany</td><td class="lenss"></td></tr>
        <tr><td></td><td>1235</td><td>Jason</td><td>Germany</td><td class="lenss"></td></tr>
        <tr><td></td><td>1235</td><td>Jason</td><td>China</td><td class="lenss"></td></tr>
        <tr><td></td><td>1235</td><td>Jason</td><td>China</td><td class="lenss"></td></tr>
        <tr><td></td><td>1235</td><td>Jason</td><td>China</td><td class="lenss"></td></tr>
        <tr><td></td><td>1235</td><td>Jason</td><td>China</td><td class="lenss"></td></tr>   
      </tbody>
    </table>
</body>
</html>

javascript - 根据数据表html打印单独的页面

问题描述

解决方案

推荐阅读