Question

我有一个可以成功打印的HTML表格，我想做的事是在表格外，我想打印选择的选择项而我的一栏是键入数字，以便打印表格，我想将其向右对齐

这是链接fiddle

当用户单击“打印”按钮时，我想做的事情是打印页面的顶部应该包含Company name

我正在使用以下功能进行打印

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

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

})

注意：：如果有任何bettr选项可以打印我打开的html表

Answer 1

使用@media print { }将样式应用于仅在打印屏幕上显示的元素。

快速解决方案是创建css类，以在打印/屏幕模式下显示/隐藏元素。

即

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

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

然后将css类应用于具有公司名称的元素以将其隐藏：

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

并添加带有行的表行，该行还包含公司名称元素的实例，该实例将具有show-on-print css类：

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

提琴：https://jsfiddle.net/niklaz/qxbhv2u0/3/

完整示例（最好检查小提琴，因为SO片段不允许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();
  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>

如何打印HTML表格

1 个答案: