我有一个带有一些文本区域的表单，当文本超出文本框时允许滚动条。用户希望能够打印屏幕，并且此文本不可见。如何仅打印所有文本？我最好是打印到pdf链接还是什么？
答案 0 :(得分：65)
你不能单独用CSS解决这个问题。
让我说服你涉及打印样式表和overflow: visible的答案是不够的。打开this page并查看来源。正是他们的建议，对吗？现在打印预览（例如，OS X上的Chrome 13，就像我一样）。请注意，在尝试打印时，您只能看到一行或两行注释！
以下是我的测试用例的网址：https://alanhogan.github.io/web-experiments/print_textarea.html
一个JavaScript链接，用于打开一个新窗口并将textarea的内容写入其中以进行打印。或者：
更新textarea后，将其内容复制到另一个隐藏在屏幕上但在打印时显示的元素。
（如果您的textarea是只读的，那么服务器端解决方案也是可行的。）
请注意textarea默认情况下对空格的处理方式与HTML不同，因此您应该考虑在您打开的新窗口或助手white-space: pre-wrap;中应用CSS div。 IE7及更早版本不了解pre-wrap，所以如果这是一个问题，请接受它或为它们使用解决方法。或者使弹出窗口实际上是纯文本，字面上使用媒体类型text/plain（可能需要服务器端组件）。
我创建了一个demo of one JavaScript technique。
核心概念是将textarea内容复制到另一个打印助手。代码如下。
HTML：
<textarea name="textarea" wrap="wrap" id="the_textarea">
</textarea>
<div id="print_helper"></div>
CSS（全部/非打印）：
/* Styles for all media */
#print_helper {
display: none;
}
CSS（打印）：
/* Styles for print (include this after the above) */
#print_helper {
display: block;
overflow: visible;
font-family: Menlo, "Deja Vu Sans Mono", "Bitstream Vera Sans Mono", Monaco, monospace;
white-space: pre;
white-space: pre-wrap;
}
#the_textarea {
display: none;
}
Javascript（使用jQuery）：
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
function copy_to_print_helper(){
$('#print_helper').text($('#the_textarea').val());
}
$('#the_textarea').bind('keydown keyup keypress cut copy past blur change', function(){
copy_to_print_helper(); // consider debouncing this to avoid slowdowns!
});
copy_to_print_helper(); // on initial page load
});
</script>
同样，成功基于JavaScript的演示位于https://alanhogan.github.io/web-experiments/print_textarea_js.html。
答案 1 :(得分：6)
遍历每个文本区域并将内容移动到持有者
window.onbeforeprint = function () {
$('.print-content').remove();
$('textarea').each(function () {
var text = $(this).val();
$(this).after('<p class="well print-content">' + text + '</p>');
});
}
并使用以下CSS
.print-content {
display: none !important;
}
@media print {
.print-content {
display: block !important;
}
textarea {display: none !important;}
}
答案 2 :(得分：4)
我最近遇到了同样的问题。我的解决方案是将内容复制到用于编辑的表单控件和用于打印的div中。
在我的头脑中，我放了一个打印样式表。
<link rel="stylesheet" href="printform.css" type="text/css" media="print" />
在printform.css中我添加了以下内容
.screenOnly { display: none; }
.printOnly { display: inline-block; }
对于textareas（以及导致问题的其他字段类型），我使用了以下代码
<textarea class="screenOnly" name="myTextArea"><?php echo (htmlspecialchars ($_POST ['myTextArea'])); ?></textarea>
<div class="printOnly"><?php echo (htmlspecialchars ($_POST ['myTextArea'])); ?></div>
当在屏幕上显示时，将显示textareas并隐藏重复其内容的div。当打印相反时适用。
我知道你已经选择了这个问题的答案，但是使用打印样式表是一个好主意，它没有描述具体的解决方案。设置溢出：在textarea上可见（我的第一个想法）没有用，所以我最终得到了上面的解决方案。如果你仍然遇到困难，我希望这可以帮助你
答案 3 :(得分：1)
最近也鼓励这个问题。感谢Alan H的帖子。它适用于Chrome和Safari。但是，对于IE和Firefox，问题是打印（FF），缺少页面和重叠布局（IE9）将丢失最后几页（textarea之后的页面元素）。
另一个有助于解决问题的发现是，您可以正确设置textarea的行属性，因为控件的高度表示它可以使用CSS溢出：可见的东西。所有浏览器在打印时似乎都尊重rows属性。
答案 4 :(得分：1)
这似乎适用于所有含有溢出内容的元素：
$("textarea").each(function () {
var Contents = $(this).val();
if ($(this)[0].scrollHeight > $(this).height()) {
$(this).after("<div class='print-helper'>" + Contents + "</div>");
$(this).addClass("no-print");
}
});
答案 5 :(得分：0)
为此类<link rel="stylesheet" href="print.css" type="text/css" media="print" />之类的打印介质定义单独的CSS，对于文本区域，将overflow属性定义为
overflow: visible;
答案 6 :(得分：0)
这是一个简单的CSS解决方案，因为大多数用户并不打算打印一些额外的空白区域。打印时，只需将textareas的最小高度定位：
@media print {
textarea {
min-height: 500px;
}
}
当你在“打印预览”中查看它时，用最小高度将其标记到CSS的末尾。
答案 7 :(得分：0)
使用纯CSS无法准备textarea进行打印。
有必要在文本区域添加一些javacript魔法或添加隐藏字段。
这里提到了几种解决方案：
<强> 1。隐藏的段落或div
HTML＆amp; CSS：
<textarea>Sample Text</textarea>
<div class="hidden-div">Sample Text</div>
<style>
.hidden-div{display: none;}
@media print{
.hidden-div{display:block;}
}
</style>
<强> 2。的Javascript
您可以使用js库，例如https://github.com/thomasjo/jquery-autoresize
$(function() {
$("textarea").autoResize()
})
答案 8 :(得分：0)
加上上面的Alan's答案，如果在同一页面上有多个此问题的实例，则可以使用data- *属性一次处理所有问题。样本：
var $printOnlyArr = $('.print-only');
for (var i = 0; i < $printOnlyArr.length; i++) {
var $printOnly = $($printOnlyArr[i]);
var textSource = $printOnly.data('textsource');
if (textSource) {
$printOnly.text($("#" + textSource).val());
}
}.print-only {
display: none;
}
@media print {
.print-only {
display: block;
}
.no-print {
display: none;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class="form-control no-print" maxlength="2000" id="txtAdditionalComments"></textarea>
<div class="print-only" data-textsource="txtAdditionalComments"></div>
答案 9 :(得分：0)
我有同样的问题。我的项目是React，我是一个semnaticUi TextArea组件。当我按下打印屏幕按钮时，只能在文本视图中向下滚动才能看到的文本，也就是“溢出”。
解决方案 ：）
我只是改用了普通的段落标签，并在包含p标签的div上设置了css https://www.example.com/some-page/。
为我工作！
答案 10 :(得分：0)
使用 jQuery 试试这个。根据行数重新定义所有文本区域的高度。
注意：这段代码也会改变屏幕上的文本区域
window.onbeforeprint = function () {
$('textarea').each(function () {
var lines = Math.round($(this).val().split('\n').length * 1.6) ; //multiply to 1.6 to consider spacing between lines
$(this).height(lines+'em');
});
}
答案 11 :(得分：-2)
我在造型中使用它：
PRE.print {
display:none;
}
@media print {
TEXTAREA {
display:none;
}
PRE.print {
display:block;
width:90%; /* fixes margin issues in some funky browsers */
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
font-family:monospace,sans;
}
}
然后，在每个TEXTAREA之后，我使用类似“print”的PRE，如下所示：
<textarea id="message" name="message" rows="10" cols="80" onblur="updatePrint('#message')"><?= $MESSAGE ?></textarea>
<pre id="message-print" class="print">
<?= $MESSAGE ?>
</pre>
...请注意我使用的PHP - 您可以使用您的编程语言切换。然后上面的代码需要以下函数，假设你加载了jQuery库：
<script type="text/javascript">
function updatePrint(sID) {
$(sID + '-print').text($(sID)[0].value);
}
</script>
这一切都有效
这样做的方式是我基本上将内容加载到页面中两次，但使用样式表来隐藏不适合打印机的内容，如TEXTAREA。
您可以根据需要更改PRE样式。但是，我使用monospace，以防有人想要打印他们在字段中输入的HTML代码并希望它格式化。
onblur事件有助于捕获更新相关PRE的需要。
请注意，您还可以通过HTML的HEAD部分中的链接rel上的media属性执行样式表内容，使用media =“all not print”和media =“print”等内容。