如何打印包含tab滚动内容的完整页面？

问题描述：需要打印包含Tab内所有滚动内容的完整页面，目前打印仅能输出屏幕可见区域的内容。

浏览器网页场景解决步骤 #

• 先点击激活需要打印的Tab，确保目标Tab处于当前显示状态
• 打开开发者工具：按F12或者右键点击页面空白处选择「检查」
• 手动右键点击Tab内的滚动区域，选择「检查」，自动定位到滚动容器的DOM元素
• 切换到控制台面板，输入以下代码执行，临时解除滚动高度限制：

// 选中刚才定位的滚动容器元素
const scrollBox = $0;
// 展开滚动区域全部内容
scrollBox.style.overflow = 'visible';
scrollBox.style.maxHeight = 'unset';
scrollBox.style.height = 'auto';
// 批量解除父级元素的高度/溢出限制
let parentEl = scrollBox.parentElement;
while(parentEl) {
  parentEl.style.overflow = 'visible';
  parentEl.style.maxHeight = 'unset';
  parentEl = parentEl.parentElement;
}

• 执行完成后按Ctrl+P（Windows）/Command+P（Mac）触发打印，预览即可看到完整的Tab滚动内容
• 打印完成后刷新页面即可恢复原有页面样式

快速调试替代方案 #

如果不想写代码，可以尝试Chrome浏览器的打印适配设置：

• 激活目标Tab后按打印快捷键，打开打印预览页
• 展开左侧「更多设置」，勾选打印背景图形，边距选择「默认」或「无」
• 若仍有内容截断，适当调低缩放比例，直到预览显示全部内容

桌面软件场景方案 #

如果是客户端软件内的Tab内容打印：

• 优先使用软件内置的打印/导出PDF功能，多数专业软件的内置打印会自动加载全量滚动内容
• 无内置打印功能时，使用滚动长截图工具截取完整Tab内容后，再打印截图文件

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