textarea溢出时打印

Question

我有一个带有一些文本区域的表单，当文本超出文本框时允许滚动条。用户希望能够打印屏幕，但此文本不可见。如何使所有文本都可见以供打印？我最好制作一个打印到 pdf 的链接还是什么？

原文由 Timothy Ruhle 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

单靠 CSS 是 无法解决 这个问题的。

为什么纯 CSS 解决方案是不够的（带演示）

让我说服您， 涉及打印样式表和 overflow: visible 的答案是不够的。 打开 此页面 并查看源代码。正是他们建议的，对吧？现在打印预览它（比如，在 OS X 上的 Chrome 13 中，就像我一样）。请注意，当您尝试打印时，您只能看到注释的一两行！

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

解决方案：

1. 打开一个新窗口并将文本区域的内容写入其中以供打印的 JavaScript 链接。要么：

2. 更新文本区域时，将其内容复制到另一个元素，该元素在屏幕上隐藏但在打印时显示。

3. （如果您的 textarea 是只读的，那么服务器端解决方案也是可行的。）

请注意， textarea s 对待空白的方式与默认情况下的 HTML 不同，因此您应该考虑应用 CSS white-space: pre-wrap; 在您打开的新窗口中或您的助手 div ， 分别。 IE7 及更早版本不理解 pre-wrap 但是，如果这是一个问题，要么接受它，要么使用解决方法。或者使弹出窗口实际上是纯文本，字面意思是媒体类型 text/plain （这可能需要服务器端组件）。

“打印助手”解决方案（带代码+演示）

我已经创建了 一个 JavaScript 技术的 演示。

核心概念是将文本区域内容复制到另一个打印助手。代码如下。

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 。

原文由 Alan H. 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Samuel Gray 发布，翻译遵循 CC BY-SA 3.0 许可协议