textarea溢出时打印

Question

我有一个带有一些文本区域的表单,当文本超出文本框时允许滚动条.用户希望能够打印屏幕,并且此文本不可见.如何仅打印所有文本？我最好是打印到PDF链接还是什么？

Answer 1

你不能独自解决这个问题,CSS.

为什么Pure-CSS解决方案不足(使用演示)

让我说服你涉及打印样式表overflow: visible的答案是不够的.打开此页面并查看源代码.正是他们的建议,对吗？现在打印预览它(例如,OS X上的Chrome 13,就像我一样).请注意,在尝试打印时,您只能看到一行或两行音符!

这是我的测试用例的URL:https://alanhogan.github.io/web-experiments/print_textarea.html

解决方案:

1. 一个JavaScript链接,用于打开一个新窗口并将textarea的内容写入其中以进行打印.要么:

2. 更新textarea时,将其内容复制到另一个隐藏屏幕但在打印时显示的元素.

3. (如果您textarea是只读的,那么服务器端解决方案也是可行的.)

请注意,textarea默认情况下,s处理空格的方式与HTML不同,因此您应该考虑分别white-space: pre-wrap;在打开的新窗口或帮助程序中应用CSS div.pre-wrap然而,IE7及更早版本并不理解,因此如果这是一个问题,请接受它或为它们使用变通方法.或者使弹出窗口实际上是纯文本,字面上提供媒体类型text/plain(可能需要服务器端组件).

"打印助手"解决方案(带代码+演示)

我创建了一个JavaScript技术的演示.

核心概念是将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.

Answer 2

遍历每个文本区域并将内容移动到持有者

    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;}
}