Печать только textarea

Я хотел бы напечатать только содержимое элемента textarea со страницы веб-сайта. В частности, я хотел бы убедиться, что ничто не обрезается границей текстового поля, поскольку содержимое будет довольно большим.

какова лучшая стратегия для решения этой проблемы?

6
javascript printing printing-web-page textarea

6 ответов

сделать таблицу стилей печати, где все элементы за исключением textarea установлены в CSS для отображения: none;, а для textarea-переполнение: visible.

свяжите его со страницей с тегом link в заголовке, установленным в media= "print".

ты молодец.

6

сделайте другой CSS с набором носителей для печати

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

http://webdesign.about.com/cs/css/a/aa042103a.htm

3

Если пользователь нажимает "печать", вы можете открыть новое окно только с содержимым textarea на пустой странице и начать печать оттуда, а затем закрыть это окно.

обновление: Я думаю, что предлагаемые решения CSS, вероятно, являются лучшими стратегиями, но если кому-то нравится это предложение, они все равно могут его поддержать.

2

Я бы пошел на комбо других предложений.

Не убивайте кнопку печати для всей страницы с переопределением таблицы стилей, а вместо этого предоставьте кнопку textarea, которая позволяет пользователю печатать только это содержимое.

эта кнопка откроет новое окно с меню / chrome и т. д. и клонировать содержимое textarea только (и или предоставить файл печати css)

1

Я сделал CSS для печати, чтобы скрыть ряд полей. Проблема осложнялась тем, что я использовал nicEdit, который динамически создает IFRAME. Поэтому мне пришлось добавить событие, которое приняло события onblur и скопировало их в скрытый (кроме печати) Div. "divtext" является hiddent див и "storyText" находится в textarea.

textarea {
  display: none;
}

*/ #divtext {
  display: block;
}

div, DIV {
  border-style: none !important;
  float: none !important;
  overflow: visible !important;
  display: inline !important;
}

/* disable nearly all styles -- especially the nicedit ones! */

#nav-wrapper, #navigation, img, p.message, .about, label, input, button, #nav-right, #nav-left, .template, #header, .nicEdit-pane, .nicEdit-selected, .nicEdit-panelContain, .nicEdit-panel, .nicEdit-frame {
  display: none !important;
}

/*hide Nicedit buttons    */

.nicEdit-button-active, .nicEdit-button-hover, .nicEdit-buttonContain, .nicEdit-button, .nicEdit-buttonEnabled, .nicEdit-selectContain, .nicEdit-selectControl, .nicEdit-selectTxt {
  display: none !important;
}

код javascript для nicEdit:

<script type="text/javascript" src="/media/nicEdit.js"></script>
<script type="text/javascript">
  bkLib.onDomLoaded(function () {
    var nic = new nicEditor({
      fullPanel: true
    }).panelInstance('storyText');

    document.getElementById("storyText").nic = nic;
    nic.addEvent('blur', function () {
      document.getElementById("storyText").value = 
      nic.instanceById('storyText').getContent();
      document.getElementById("divtext").innerHTML = nic.instanceById('storyText').getContent();
    });
  });
</script>
1

было ли переполнение: видимым; на textarea действительно работает для любого из вас? FF3, похоже, игнорирует это правило на текстовых полях в печатных листах. Это не ошибка или что-нибудь.

0