从数据表行打印工作表而不首先打开它
Print sheet from data table row without open it first
我在下面的表中有一组记录:
+--------+---------+-------+----------+--------+
| 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>
相关文章:
- 用程序搜索JQuery数据表中的文本
- 具有rowGrouping的数据表无法隐藏列
- 使用谷歌应用程序脚本将服务器端数据表返回到客户端
- 将单击事件添加到数据表
- 使用带有参数的数据表sAjaxSource
- 对角度数据表中括号内的数字进行排序
- 动态构建一个数据表与scriplets
- jquery数据表的自定义ko绑定
- 预览数据表单
- 如何在数据表中设置从Ajax响应选中的复选框
- DT数据表背景颜色为黑色,但仍有悬停和选择颜色
- 数据表-隐藏/显示列
- 对损坏的子行进行排序的数据表
- 将数据表打印为默认表
- 从数据表行打印工作表而不首先打开它
- 数据表没有得到合适的宽度列在打印
- 检测是否处于打印模式或单击数据表导出工具中的打印按钮
- 如何自定义数据表TableTools打印预览页
- 数据表工具副本,pdf.csv,excel导出不起作用.只有打印在工作
- 打印数据表中的所有数据