Печать только текстовой области - PullRequest
Новая
       17

Печать только текстовой области

6 голосов
/ 07 ноября 2008

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

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

Ответы [ 6 ]

6 голосов
/ 07 ноября 2008

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

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

Вы сделали.

3 голосов
/ 07 ноября 2008

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

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

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

2 голосов
/ 07 ноября 2008

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

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

1 голос
/ 07 ноября 2008

Я сделал печатный носитель CSS, чтобы скрыть ряд полей. Проблема была осложнена тем, что я использовал nicEdit, который динамически создает IFRAME. Поэтому мне пришлось добавить событие, которое брало onblur события и копировало их в скрытый (кроме печати) Div. «divtext» - это скрытый Div, а 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 голос
/ 07 ноября 2008

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

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

Эта кнопка откроет новое окно с меню / хромом и т. Д. И клонирует только текстовое содержимое (или предоставит файл для печати css)

0 голосов
/ 29 мая 2009

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

...