Печать при переполнении textarea

Ответ 1

Вы не можете решить эту проблему только с помощью CSS.

Почему Pure-CSS-решений недостаточно (с демонстрацией)

Позвольте мне убедить вас в ответах, включающих таблицы стилей печати и overflow: visible недостаточно. Откройте эту страницу и посмотрите на источник. Только то, что они предложили, верно? Теперь распечатайте предварительный просмотр (скажем, в Chrome 13 на OS X, как я). Обратите внимание, что вы можете видеть только одну или две строки заметки при попытке печати!

Вот снова URL для моего теста: https://alanhogan.github.io/web-experiment/print_textarea.html

Решения:

1. Ссылка JavaScript, которая открывает новое окно и записывает в него содержимое текстовой области для печати. Или же:

2. Когда текстовая область обновлена, скопируйте ее содержимое в другой элемент, который скрыт для экрана, но отображается при печати.

3. (Если ваша textarea только для чтения, то решение на стороне сервера также работает.)

Обратите внимание, что textarea обрабатывает пробелы иначе, чем HTML по умолчанию, поэтому вам следует рассмотреть возможность применения пустого white-space: pre-wrap; CSS white-space: pre-wrap; в новом окне, которое вы открываете или в свой вспомогательный div, соответственно. IE7 и старше не понимают pre-wrap, поэтому, если это проблема, либо примите ее, либо используйте обходной путь для них. или сделать всплывающее окно фактически простым текстом, буквально обслуживаемым типом носителя text/plain (для которого, вероятно, требуется компонент на стороне сервера).

Решение "Print Helper" (с кодом + демо)

Я создал демо одной техники 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-experiment/print_textarea_js.html.

Ответ 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;}
}

Ответ 3

Недавно я столкнулся с той же проблемой. Мое решение состояло в том, чтобы дублировать содержимое в виде элементов управления форматом для редактирования и в divs для печати.

В моей голове я помещаю таблицу стилей печати.

<link rel="stylesheet" href="printform.css" type="text/css" media="print" />

В printform.css я помещаю следующие

.screenOnly { display: none; }
.printOnly { display: inline-block; }

Для текстовых полей (и других типов полей, которые вызывали проблемы) я использовал следующий код

<textarea class="screenOnly" name="myTextArea"><?php echo (htmlspecialchars ($_POST ['myTextArea'])); ?></textarea>
<div class="printOnly"><?php echo (htmlspecialchars ($_POST ['myTextArea'])); ?></div>

При отображении на экране отображаются текстовые поля, а divs, дублирующие их содержимое, скрыты. При печати применяется обратное.

Я знаю, что вы уже выбрали ответ на этот вопрос, но при использовании таблицы стилей печати это хорошая идея, она не описала конкретного решения. Настройка переполнения: видимая в текстовом поле (моя первая идея) не работала, поэтому я закончил работу над решением выше. Если у вас все еще есть трудности, я надеюсь, что это поможет вам

Ответ 4

Просто закройте проблему недавно. Спасибо за сообщения Alan H. Он отлично работает с Chrome и Safari. Однако, с IE и Firefox, проблема в том, что последние несколько страниц (элементы страницы после textarea) будут отсутствовать при печати (FF), отсутствующих страницах и наложенном макете (IE9).

Еще одно обнаружение, которое будет полезно для решения проблемы, - вы можете правильно установить свойства строк textarea, поскольку высота управления говорит о том, что он работает с переполнением CSS: видимый материал. Кажется, что все браузеры уважают свойство rows при печати. ​​

Ответ 5

Это похоже на работу со всеми элементами, которые переполняют содержимое:

$("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");
    }
});

Ответ 6

Определите отдельный CSS для печатных носителей, таких как <link rel="stylesheet" href="print.css" type="text/css" media="print" /> и для текстовой области, определите атрибут переполнения как

overflow: visible;

Ответ 7

Это простое исправление с CSS, учитывая, что большинство пользователей на самом деле не беспокоились о том, чтобы напечатать немного лишнего пробела. Задайте минимальную высоту для текстовых полей при печати:

@media print { 
textarea {
min-height: 500px;  
}
}

Отметьте, что в конце вашего CSS с минимальной высотой, которая достаточно удобна, когда вы смотрите на нее в окне предварительного просмотра.

Ответ 8

С использованием чистого CSS невозможно подготовить текстовое поле для печати.

Необходимо добавить некоторую магию javacript в текстовую область или добавить скрытое поле.

Есть несколько решений, которые были упомянуты здесь:

• Скрытый абзац или div
• Использование Javascript для увеличения размера текстового поля

1. Скрытый абзац или div

HTML и 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()
})

Ответ 9

Если добавить к ответу Алана выше, если у вас есть несколько случаев этой проблемы на одной странице, то вы можете использовать атрибуты 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>

Ответ 10

Я использую это в своем стиле:

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, я использую PRE с классом "print" следующим образом:

<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 по своему усмотрению. Тем не менее, я использую моноширину, если кто-то хочет напечатать HTML-код, который они набрали в поле, и хотел, чтобы он хорошо отформатировался.

Событие onblur помогает зафиксировать необходимость обновления соответствующего PRE.

Обратите внимание, что вы также можете создавать материал стилей через атрибут media в ссылке rel в разделе HEAD вашего HTML, используя такие вещи, как media = "all not print" и media = "print".