1. 技术文章
  2. Print all tabs on a webpage

Print all tabs on a webpage

由 三世轮回 提交于 2020-01-05 03:27:45

问题


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.

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>

回答1:


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>')
});

See updated example for demonstration.

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;
  }
}



回答2:


If I understand correctly you want to show some hidden things when printing? I would use the media print for this and a special style sheet that styles things for printing.

<link rel="stylesheet" media="print" href="print.css">



回答3:


This appears to work (pure JavaScript):

document.querySelector('.tab-content').classList.remove('tab-content');

http://codepen.io/anon/pen/BoJMVd

You could add a button that does that and call it Print view.

function printView() {
  document.querySelector('.tab-content').classList.remove('tab-content');
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<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>
    <li class="">
      <a onclick="printView();">Print view</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>

https://jsfiddle.net/ryanpcmcquen/8eocztsc/



来源：https://stackoverflow.com/questions/33261642/print-all-tabs-on-a-webpage

标签
javascript
html
css
printing
removeclass
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!