从数据表行打印工作表而不先打开它[关闭]答案

【问题标题】：Print sheet from data table row without open it first [closed]从数据表行打印工作表而不先打开它[关闭]
【发布时间】：2016-10-19 03:50:40
【问题描述】：

我在下表中有一组记录：

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

非常感谢。

【问题讨论】：

标签： javascript php jquery html css

【解决方案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;
  }
}

【讨论】：

它的作品，比你很。但是，这是风景。怎么拍人像？
这一切都在您的标记和布局中。您所需要的只是相应地设置页面样式。
我明白了。有机会在页面外保护我的工作表吗？因此访问者无法从“查看页面源”查看布局

【解决方案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>

【讨论】：

非常感谢，它有效。