如何用jQuery实现单次点击打印所有Bootstrap选项卡全部内容

你之前的实现逻辑存在问题：Bootstrap 选项卡同一时间仅能有一个激活项，非激活的 .tab-pane 默认为 display: none 状态，连续调用 .tab('show') 只会保留最后一个选项卡为激活状态，其他内容仍会被隐藏，所以打印时仅能输出单页内容。

你可以通过打印专属媒体查询的方式实现需求，不会影响页面正常的选项卡切换逻辑，同时打印时自动展示所有内容垂直排布：

1. 添加打印专用CSS样式 #

在HTML的<head>标签内新增如下样式代码：

<style>
@media print {
  /* 隐藏打印时不需要的元素：选项卡导航栏、下载按钮 */
  .nav-tabs, #downloadPdf {
    display: none !important;
  }
  /* 强制所有选项卡内容显示，垂直排布 */
  .tab-content > .tab-pane {
    display: block !important;
    opacity: 1 !important;
    margin-bottom: 30px; /* 不同选项卡内容之间加间距，排版更清晰 */
  }
  /* 清除fade过渡效果对打印的影响 */
  .tab-content > .fade {
    opacity: 1 !important;
    transition: none !important;
  }
}
</style>

2. 修改JS触发逻辑 #

删除原有冗余的选项卡切换代码，仅保留打印触发即可：

$("#downloadPdf").click(function() {
  window.print();
});

效果说明 #

• 正常浏览页面时，选项卡切换功能完全不受影响
• 点击下载按钮触发打印后，所有选项卡内容会自动按顺序垂直排列输出，不需要的导航、按钮元素会自动隐藏

内容的提问来源于stack exchange，提问作者nonutt