求助：Bootstrap文本域打印仅显示滚动条，无法展示全部内容

我之前也碰到过一模一样的问题，Bootstrap的默认打印样式会让textarea保留滚动条和固定高度，导致输入的内容没法完全显示出来。给你几个亲测有效的解决方案：

1. 自定义打印媒体查询样式 #

最直接的办法是针对打印场景重写textarea的样式，强制它展开显示全部内容。在你的CSS里加上这段代码：

@media print {
  /* 可以给目标textarea加专属类名，比如.report-textarea，避免影响其他textarea */
  textarea.report-textarea {
    overflow: visible !important;
    height: auto !important;
    resize: none !important;
    border: 0 !important; /* 可选，打印时去掉边框更清爽 */
  }
  /* 如果textarea的父容器有固定高度/溢出限制，也要一并修改 */
  .report-container {
    height: auto !important;
    overflow: visible !important;
  }
}

这里的!important是为了覆盖Bootstrap的默认打印样式，确保你的自定义规则能生效。

2. 利用Bootstrap内置的打印类 #

Bootstrap自带了专门的打印工具类，可以快速调整元素在打印时的表现：

• 给textarea添加d-print-block类，确保它在打印时以块级元素显示，自动适配内容高度
• 如果父容器有overflow-hidden这类限制样式，打印时可以替换成d-print-block，或者额外添加overflow-visible的打印专属类

3. 打印前动态调整textarea高度（JS辅助） #

如果纯CSS方案效果不够理想，可以用JavaScript在打印触发前动态调整textarea的高度，让它刚好容纳所有内容：

// 监听打印前事件，调整高度
window.addEventListener('beforeprint', () => {
  const targetTextareas = document.querySelectorAll('textarea.report-textarea');
  targetTextareas.forEach(ta => {
    // 先重置高度为auto，再设置为内容滚动高度
    ta.style.height = 'auto';
    ta.style.height = `${ta.scrollHeight}px`;
  });
});

// 打印结束后恢复原样式，不影响页面正常使用
window.addEventListener('afterprint', () => {
  const targetTextareas = document.querySelectorAll('textarea.report-textarea');
  targetTextareas.forEach(ta => {
    ta.style.height = '';
  });
});

这个方法能保证textarea在打印时完全展开，打印后又恢复到原来的状态，不影响页面正常交互。

4. 多浏览器测试打印预览 #

不同浏览器的打印渲染引擎有细微差异，修改完样式后记得用Chrome、Firefox等主流浏览器的打印预览（Ctrl+P / Command+P）验证效果，确保所有内容都能正常显示。

内容的提问来源于stack exchange，提问作者Tarik Biševac