Question

我在下表中有一组记录：

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

单击PRINT时如何直接打印此工作表（打开打印窗口）而不先打开它？

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

提前多多感谢。

Answer 1

您可以使用@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;
  }
}

Answer 2

检查一下，

<!-- 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>

从数据表行打印表而不先打开它

2 个答案: