textarea打印被截断是因浏览器仅渲染可视区域，需用JS提取value转为pre-wrap样式div替换，禁用innerHTML防XSS，并在打印后还原状态。
textarea 在打印时被截断或只显示一行
直接打印含 textarea 的表格，浏览器默认只渲染其「可视区域」内容（即 rows 指定的行数），滚动条以下的文字不会出现在打印输出中——这不是 bug，而是 textarea 的固有渲染行为。它本质是表单控件，不是纯文本容器。
解决思路不是“让 textarea 自动展开”，而是把它的值提取出来，转为普通、可分页、可换行的文本块。
- 用 JavaScript 在打印前读取
textarea.value，替换原textarea元素为<div class="print-text">...</div> - 确保该
div有white-space: pre-wrap;和word-break: break-word;，保留换行与长单词折行 - 避免用
height或max-height限制其高度——打印时视口概念失效，固定高会直接截断
用 @media print 覆盖 textarea 样式无效？
单纯在 @media print 里写 textarea { height: auto; } 不起作用。浏览器打印引擎不重新计算表单控件的内部滚动状态，height: auto 对它无意义。
真正有效的做法是：在打印触发前，用 JS 把所有 textarea 替换成等效的只读文本容器，并临时移除原始 textarea。
立即学习“前端免费学习笔记（深入）”；
- 不要用
display: none隐藏原textarea后再显示div——布局可能塌陷，影响分页位置 - 推荐用
visibility: hidden+position: absolute将原textarea移出打印流，同时保持文档流占位 - 替换后的
div必须和原textarea在同一父级下，且设置margin: 0; padding: 0;，否则行高错位
表格内 textarea 值含 HTML 标签怎么办
如果 textarea 里用户输入了 <br> 或 等，直接插入 div.textContent 会原样显示符号，而非换行/空格。
需要做轻量解析：
-
value.replace(/\n/g, '<br>').replace(/ /g, ' ')→ 仅处理基础换行和空格 - 若需支持更复杂格式（如粗体、列表），应禁止用户在
textarea中输 HTML，改用富文本编辑器，并导出为打印友好的纯文本结构 - 绝对不要用
innerHTML = value—— XSS 风险，且浏览器打印对未闭合标签容忍度极低，易导致后续内容丢失
打印后页面状态恢复容易漏掉什么
很多人替换完 textarea 就调 window.print()，但没考虑用户取消打印、反复预览、或打印失败的情况。
关键遗漏点：
- 没监听
afterprint事件（注意：Chrome/Firefox 不支持该事件，不能依赖） - 没给替换操作打标记（如加
data-print-replaced="true"），导致二次点击打印时重复替换，DOM 错乱 - 没保存原始
textarea的disabled/readonly状态，恢复时变成可编辑，破坏业务逻辑
最稳妥的做法：每次打印都走「快照→替换→打印→还原」闭环，且还原逻辑放在 setTimeout(..., 0) 微任务中，避开打印弹窗阻塞。
