从数据表行打印工作表而不首先打开它 - Print sheet from data table row without open it first

Print sheet from data table row without open it first

本文关键字：数据表打印工作 | 更新日期: 2023-09-27

我在下面的表中有一组记录:

+--------+---------+-------+----------+--------+
| Name   | Address | Phone + Email    | Action |
+--------+---------+-------+----------+--------+
| Andy   | NYC     | 555   | me@me.me | PRINT  |
+--------+---------+-------+----------+--------+

如何直接打印这张表(打开打印窗口)时，点击打印没有打开它先?

+--------------------------------------+
|                                      |
|   Date: Oct, 20 2016                 |
|                                      |
|                                      |
|   Dear Andy, this is your profile:   |
|                                      |
|   Name: Andy                         |
|   Address: NYC                       |
|   Phone: 555                         |
|   Email: me@me.me                    |
|                                      |
+--------------------------------------+

您可以使用@media标记来实现该功能。以下是Codepen Solution示例

<div class="screen-container">
  <div class="row">
    <div class="col-lg-2">Value One</div>
    <div class="col-lg-2">Value Two</div>
    <div class="col-lg-2">Value Three</div>
    <div class="col-lg-2">Value Four</div>
    <div class="col-lg-2">Value Five</div>
    <div class="col-lg-2">Value Six</div>
  </div>
</div>
<div class="print-container">
  <div class="padding-top-10 padding-bottom-10">Date : Oct 19 2016</div>
  <div class="salutation">Dear Andy, this is your profile</div>
  <div>Name : Andy</div>
  <div>Address : NYC</div>
  <div>Phone : 123-456-7890</div>
</div>
.padding-bottom-10 {
  padding-bottom: 10px;
}
.padding-top-10 {
  padding-top: 10px;
}
.salutation {
  margin: 20px 0 20px 0;
}
@media screen {
  .screen-container {
    display: block;
  }
  .print-container {
    display: none;
  }
}
@media print {
  .print-container {
    display: block;
  }
  .screen-container {
    display: none;
  }
}

检查这个，

<!-- Display on web page -->
<table id="main">
    <tr>
        <td>Name</td>
        <td>Address</td>
        <td>Phone</td>
        <td>Email</td>
        <td>Action</td>
    </tr>
    <tr>
        <td>Andy</td>
        <td>NYC</td>
        <td>555</td>
        <td>me@me.me</td>
        <td><input type="button" onclick="window.print()" value="Print Table" /></td>   
    </tr>
</table>
<!-- For Print -->
<table id="print">
    <tr>
        <td>Date</td>
        <td><?php echo date('Y-m-d'); ?></td>
    </tr>   
    <tr>
        <td colspan="2">Dear Andy, this is your profile:</td>
    </tr>
    <tr>
        <td>Name</td>
        <td>Andy</td>
    </tr>
    <tr>
        <td>Address</td>
        <td>NYC</td>
    </tr>   
    <tr>
        <td>Phone</td>
        <td>555</td>
    </tr>
    <tr>
        <td>Email</td>
        <td>me@me.me</td>
    </tr>               
</table>
<style>
    #print{
        display: none;
    }
@media print {
    #main{
        display: none;
    }
    #print{
        display: block;
    }
}
</style>