Одностраничный дисплей, проблема многостраничной печати - PullRequest
5 голосов
/ 16 января 2009

На веб-странице отображается следующее: -

  • Bob
  • Fred
  • John

Однако, когда пользователь (это я) печатает веб-страницу, я хочу, чтобы несколько повторов этого вывода с небольшими вариациями печатались на отдельных страницах: -

  • Bob
  • Fred
  • John

>page break here<

  • Bob
  • Fred
  • John

>page break here<

  • Bob
  • Fred
  • John

На самом деле содержимое страницы больше (хотя и в пределах стандартной страницы формата А4), а количество выходных страниц составляет около 20. Я бы предпочел элегантное кросс-браузерное решение, но в конечном итоге решение, которое работает в Internet Explorer 7 приемлемо.

Я использую ASP.NET MVC с jQuery (хотя прямое решение на JavaScript хорошо).

Редактировать: Стиль Page-Break-XXX CSS будет частью ответа, но меня особенно интересуют средства для динамического создания версии для печати HTML из экранной версии. Примечание. Я не хочу переходить на страницу, удобную для печати, а затем печатать ее. Я просто хочу нажать кнопку печати в браузере, и волшебство случается.

Ответы [ 3 ]

10 голосов
/ 16 января 2009

Хорошо, так что с учетом комментариев и т. Д. К моему посту примерно так:

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

Объявление следующих стилей:

<!-- media="print" means these styles will only be used by printing 
  devices -->
<style type="text/css" media="print">
    .printable{ 
      page-break-after: always;
    }
    .no_print{
      display: none;
    }
</style>
<!-- media="screen" means these styles will only be used by screen 
  devices (e.g. monitors) -->
<style type="text/css" media="screen">
    .printable{
      display: none;
    }
</style>
<!-- media types can be combined with commas to affect multiple devices -->
<style type="text/css" media="screen,print">
    h1{
      font-family: Arial, Helvetica, sans-serif;
      font-size: large;
      font-weight: bold;
    }
</style>

Затем вам нужно будет сделать что-то тяжелое в своем представлении, чтобы HTML выглядел что-то вроде этого:

<!-- Intial display for screen -->
<div class="no_print">
    <!-- Loop through users here using preferred looping/display method -->
    <ul>
        <li>Bob</li>
        <li>Fred</li>
        <li>John</li>
    </ul>
</div>
<!-- Now loop through each user, highlighting as you go, but for printer* -->
<div class="printable">
    <ul>
        <li><b>Bob</b></li>
        <li>Fred</li>
        <li>John</li>
    </ul>
</div>
<div class="printable">
    <ul>
        <li>Bob</li>
        <li><b>Fred</b></li>
        <li>John</li>
    </ul>
</div>
<div class="printable">
    <ul>
        <li>Bob</li>
        <li>Fred</li>
        <li><b>John</b></li>
    </ul>
</div>

Теперь для "соответствующего метода отображения".

Я только начинаю работать с MVC, поэтому у вас, вероятно, есть лучший способ сделать это, но сейчас я бы, вероятно, использовал такой метод RenderPartial:

<%
  /* 
  Using RenderPartial to render a usercontrol,
  we're passing in the Model here as the Model for the control, 
  depends on where you've stored your objects really, then we
  create a new anonymous type containing the properties we want
  to set.
  */

  // Display the main list
  Html.RenderPartial("~/Views/Shared/Controls/UserList.ascx",
      ViewData.Model, 
      new {HighlightUser = null, IsPrintable = false});

  // Loop through highlighting each user
  foreach (var user in ViewData.Model)
  {
    Html.RenderPartial("~/Views/Shared/Controls/UserList.ascx",
      ViewData.Model, 
      new {HighlightUser = user, IsPrintable = true});
  }
%>

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

Очевидно, что вам, вероятно, нужно совершенно другое рендеринг пользователей для отображения и печати - я полагаю, вы, вероятно, добавляете немало скрывающих и отображающих jQuery вещей и т. Д., Которые вы фактически собираетесь отобразить в печатной версии. , так что вы, вероятно, захотите два разных пользовательских элемента управления, а затем можете обойтись без передачи свойства IsPrintable.

Кроме того, в существующем состоянии будет напечатана пустая страница в конце из-за стиля «разрыва страницы» для всех элементов div - вы, возможно, захотите отметить, что вы находитесь на последнем элементе div, и придерживайтесь другого стиля, если только у вас нет информации, которая вам нужна на последней странице.

2 голосов
/ 16 января 2009

Я не уверен, что вы можете сделать все это с помощью CSS, но вот некоторые из них, с чего можно начать.

Чтобы получить разрыв страницы в CSS при печати, используйте одно из:

Они принимают значения:

auto   // Default. Insert a page break before/after the element if necessary
always // Insert a page break before/after the element
avoid  // Avoid inserting a page break before/after the element
left   // Insert page breaks before/after the element until it reaches a blank left page
right  // Insert page breaks before/after the element until it reaches a blank right page

Если вы готовы иметь какую-то «печатную» страницу, на которой перечисляется нужная вам информация, с этими стилями на повторяющихся элементах, вам следует хорошо идти.

1 голос
/ 16 января 2009

Вам нужно будет сделать все это через JavaScript, создать ссылку для печати, которая при нажатии вызывает window.print ().

Однако перед тем, как это будет вызвано, создайте нужный вывод и поместите его в отдельный контейнер (div, span, любой html-элемент, который поддерживает теги, которые вы собираетесь поместить в него). Скройте контейнер, используя основную таблицу стилей, и создайте отдельную таблицу стилей для печатных СМИ. В этой новой таблице стилей покажите элемент контейнера и скройте старые элементы и все остальное, что вы не хотите печатать.

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

Если есть способ прослушивания распечатки вашей страницы с использованием javascript, то вы также можете подключить ее.

Edit: Поскольку вы используете jQuery, я бы клонировал исходный список, используя

$('#listID').clone().appendTo('#hiddencontainer')

Документация клона

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...