时间戳

首页 > 解决方案 > 如何打印 HTML 表格

javascript - 如何打印 HTML 表格

问题描述

我有一个 HTML 表格，我正在成功打印，我想要做的是在我的表格之外我试图打印选择选项也被选中，我的列之一是数字，以便打印我想要的表格向右对齐

这是链接小提琴

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();

})

注意：如果有任何更好的选项来打印 html 表，我愿意接受

标签： javascriptjquery

解决方案

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

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

IE

.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-printcss 类：

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

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

完整示例（更好地检查小提琴，因为 SO 代码段不允许打印命令正常工作）： 

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>

推荐阅读