How To Print HTML table

问题: I have a HTML table which i am printing successfully,what i am trying to do is outside my table i am trying to print the select option also which is selected and one of my...

问题:

I have a HTML table which i am printing successfully,what i am trying to do is outside my table i am trying to print the select option also which is selected and one of my column is type as number so as printing the table i want to align that to right

here is the link fiddle

What i am trying to do when user clicks on print button the print page should contain Company name at the top

i am using below function to print

    function printData() {
  var divToPrint = document.getElementById("printIndentTable");
  newWin = window.open("");
  newWin.document.write(divToPrint.outerHTML);
  newWin.print();
  newWin.close();
}

$('#print').on('click', function() {
  printData();

})

Note: If there is any bettr option to print the html table i am open to it


回答1:

Use @media print { } to apply styles to an element that will show up only on print screen.

Quick solution would be to create css classes that would show/hide elements on print/screen mode.

i.e.

.show-on-print{
 display: none; 
}

@media print {
  .show-on-print{
    display:block;
  }
  .hide-on-print{
    display: none;
  }
 }

Then you apply css class to element with company name to hide it:

<h5 id="commonHeader" class="hide-on-print">Company Name</h5>

And add table row with column holding also instance of company name element, that will have show-on-print css class:

<tr class="show-on-print"><th colspan="3"><h5>Company Name</h5></th></tr>

Fiddle: https://jsfiddle.net/niklaz/qxbhv2u0/3/

Full example ( better check fiddle, since SO snippet won't allow print command working well):

function printData() {
  var divToPrint = document.getElementById("printIndentTable");
  newWin = window.open("");
  newWin.document.write(divToPrint.outerHTML);
  newWin.print();
  newWin.close();
}

$('#print').on('click', function() {
  printData();
  window.location = 'Header.html';
})
.show-on-print{
 display: none; 
}

@media print {
  .show-on-print{
    display:block;
  }
  .hide-on-print{
    display: none;
  }
 }
 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="container" align="center">
  <form id="indentForm" autocomplete="on">
    <div class="row ">
      <div class="col-lg-4 col-4 brder">
        <h5 id="commonHeader" class="hide-on-print">Company Name</h5>
        <select class="dropDownIndent" id="outlet" name="outlet">
					<option>XYZ</option>
					</select>
      </div>
      <div class="col-lg-4 col-4">
        <h5 id="commonHeader">Company Code</h5>
        <input type="text" class="form-control dropDownIndent" value="E2156" name="outletCode" id="companyCode">

      </div>

    </div>
    <hr style="border: 1px solid #41451f">
    <button type="button" id="print" class="commonButton">
					<i class="fas fa-save"></i>&nbsp;Print
				</button>
    <div class="table-responsive" id="commonDvScroll">
      <table id="printIndentTable" class="table table-bordered table-hover ">
        <tr class="show-on-print"><th colspan="3"><h5>Company Name</h5></th></tr>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Salary</th>
        </tr>
        <tr>
          <td>Alfreds </td>
          <td>Futterkiste</td>
          <td class="text-right">5500</td>
        </tr>
        <tr>
          <td>Francisco</td>
          <td> Chang</td>
          <td class="text-right">7700</td>
        </tr>
        <tr>
          <td>Ernst </td>
          <td>Handel</td>
          <td class="text-right">2233</td>
        </tr>
        <tr>
          <td>Helen </td>
          <td> Bennett</td>
          <td class="text-right">4444</td>
        </tr>
        <tr>
          <td>Yoshi</td>
          <td> Tannamuri</td>
          <td class="text-right">6666</td>
        </tr>
        <tr>
          <td>Giovanni</td>
          <td> Rovelli</td>
          <td class="text-right">77</td>
        </tr>
      </table>
    </div>

  </form>
</div>

  • 发表于 2019-03-23 12:27
  • 阅读 ( 249 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除