打印网页上的所有标签 [英] Print all tabs on a webpage
本文介绍了打印网页上的所有标签的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个带有多个标签的调查.用户完成调查后，我希望他们能够打印调查或将其另存为PDF.目前，我只能打印/保存已打开的标签页.
I have a survey with multiple tabs. When the user has completed the survey i want them to be able to print the survey or save it as a PDF. At the moment I can only print/save the tab that is opened.
使用JavaScript打印类时是否可以删除标签内容"，以便所有标签均显示为代码: http://codepen.io/pbuckleycork/pen/zvpMdr
Is there a to remove the 'tab-content' when printing class using JavaScript so all the tabs are displayed code: http://codepen.io/pbuckleycork/pen/zvpMdr
<div class="bs-example">
<ul class="nav nav-tabs tabs-custom">
<li class="">
<a href="#tab1" data-toggle="tab">User Info</a>
</li>
<li class="active">
<a href="#tab2" data-toggle="tab">Other Info</a>
</li>
<li class="">
<a href="#tab3" data-toggle="tab">Email History</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab1">
<div class="row equal-height-columns">
<!-- first column for create survey -->
<div class="col col-md-6 col-md-with-separator">
<div class="form-horizontal">
<div class="form-group form-group-reduce-padding">
<label for="labelName" class="col-sm-6 control-label-padding"> Name:</label>
<div class="col-sm-6">
<p id="labelName" class="form-control-static"> John Smith </p>
</div>
</div>
<div class="form-group form-group-reduce-padding">
<label for="labelAddress" class="col-sm-6 control-label-padding"> Address:</label>
<div class="col-sm-6">
<p id="labelAddress" class="form-control-static"> No1, Some Street, Some Town, Dublin, D1</p>
</div>
</div>
<div class="form-group form-group-reduce-padding">
<label for="labelEmail" class="col-sm-6 control-label-padding">Email:</label>
<div class="col-sm-6">
<p id="labelEmail" class="form-control-static"> email@email.com </p>
</div>
</div>
<div class="form-group form-group-reduce-padding">
<label for="labelDOB" class="col-sm-6 control-label-padding">DOB:</label>
<div class="col-sm-6">
<p id="labelDOB" class="form-control-static">15/02/2015</p>
</div>
</div>
<div class="form-group form-group-reduce-padding">
<label for="labelStatus" class="col-sm-6 control-label-padding">Status:</label>
<div class="col-sm-6">
<p id="labelStatus" class="form-control-static"> Active</p>
</div>
</div>
<div class="form-group form-group-reduce-padding">
<label for="labelAccBlocked" class="col-sm-6 control-label-padding">Account Blocked:</label>
<div class="col-sm-6">
<p id="labelAccBlocked" class="form-control-static"> Yes</p>
</div>
</div>
<div class="form-group form-group-reduce-padding">
<label for="labelBlocked" class="col-sm-6 control-label-padding">Blocked Until Date:</label>
<div class="col-sm-6">
<p id="labelBlocked" class="form-control-static"> 01/01/2015</p>
</div>
</div>
<div class="form-group form-group-reduce-padding">
<label for="labelBlockedReason" class="col-sm-6 control-label-padding">Blocked Reason:</label>
<div class="col-sm-6">
<p id="labelBlockedReason" class="form-control-static"> Insurance renewal has passed</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane active" id="tab2">
<br>
<p class="tab-header">Courses</p>
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<th>Stream</th>
<th>Institute</th>
<th>CourseID</th>
<th>Tutor</th>
<th>Date Course Completed</th>
<th>Course Location</th>
</tr>
<tr>
<td>NDBER</td>
<td>Carlow IT</td>
<td>ABC123</td>
<td>John Tutor</td>
<td>17/May/2014</td>
<td>Carlow</td>
</tr>
<tr>
<td>BER</td>
<td>Carlow IT</td>
<td>ABC321</td>
<td>Paul Tutor</td>
<td>02/Feb/2014</td>
<td>Carlow</td>
</tr>
</tbody>
</table>
</div>
<p class="tab-header">Exam History</p>
</div>
<div class="tab-pane" id="tab3">
<br>
<p class="tab-header">Email History</p>
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<th>From</th>
<th>To</th>
<th>CC</th>
<th>Date</th>
<th>Subject</th>
<th>Message</th>
<th>Attachment</th>
</tr>
<tr>
<td>BER@aassss.ie</td>
<td>100025@test.net</td>
<td> </td>
<td>05/May/2014</td>
<td>Welcome dsad</td>
<td><a href="#">Dear John Welcome</a>
</td>
<td><a href="#">View</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
推荐答案
您可以使用下面的代码显示所有带有标题的标签:
You can use the code below to show all tabs with headings:
$('.nav-tabs').hide();
$headings = $('.nav-tabs li a');
$('.tab-content .tab-pane').each(function(i, el){
$(this)
.addClass('active')
.prepend('<h3>' + $($headings.get(i)).text() + '</h3>')
});
请参见更新的示例进行演示.
作为一种替代解决方案，您可以添加以下CSS规则，以便在打印时显示所有选项卡窗格:
As an alternative solution, you can add the following CSS rule so that all tab panes would be shown when printed:
@media print {
.tab-content > .tab-pane {
display: block;
}
}
这篇关于打印网页上的所有标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
