Печать веб-страницы не будет отображать представление для печати и распечатывается пустым

Я создал таблицы на веб-странице, которые мне нужно распечатать. На главной странице у меня есть кнопка PrinterFriendly, которая открывает новую вкладку, на которой отображаются только таблица и содержимое, которое мне нужно напечатать. Когда я перехожу на новую вкладку и пытаюсь распечатать или получить предварительный просмотр, она совершенно пуста. Есть ли какая-то настройка или что-то в коде, которое я могу сделать, чтобы это исправить? Я также использую angularjs. Это происходит в Chrome и IE. Любая помощь приветствуется. *Если необходимо показать какой-либо код, сообщите об этом. Не уверен, что это код или настройки печати.

Этот код обеспечивает отображение содержимого в режиме предварительного просмотра ОБНОВЛЕНО

   @media print {

    body *{
        font-family: 'Open Sans', sans-serif;
        font-size: 12px;
        font-weight: 500;
        color: #101010;
        background: #f6f5fa;
        visibility: hidden;
    }
  #section-to-print, #section-to-print *{
    visibility: visible;
  }
  #section-to-print {
    position:absolute; 
    left:0;
    top:0;
  }

   #section-to-print2, #section-to-print2 *{
    visibility: visible;
  }
  #section-to-print2 {
    position:absolute; 
    left:0;
    top:0;
  }

}

preview html css angularjs printing
person Adrew    schedule 27.01.2017    source источник
comment
Приведенный выше код заставляет содержимое отображаться в предварительном просмотре перед печатью, но теперь все содержимое объединено в сетку. Есть два раздела контента, и они оба сливаются вверху. Как лучше распределить содержимое для предварительного просмотра?   -  person Adrew    schedule 28.01.2017

Ответы (1)


arrow_upward
0
arrow_downward

Пожалуйста, проверьте код ниже, он показывает содержимое в режиме предварительного просмотра.

JS Fiddle

HTML:

    <a href="javascript:window.print()">Print this page</a>
    <br>
    <div id="section-to-print">
      I crea    ted tables in a web page that I need to print. On the main page I have a printerFriendly button that opens a new tab that shows just the table and content I need printed. When I go to the new tab and try to print or get a print preview, it is completely blank. There is some setting or something in the code I can do to fix this? I am also using angularjs. This happens in Chrome and IE. Any help is appreciated. *If any code needs to be shown, please let know. Not sure if it is the code or the print settings.
    </div>

CSS:

        @media print {
        body *{
            font-family: 'Open Sans', sans-serif;
            font-size: 12px;
            font-weight: 500;
            color: #101010;
            background: #f6f5fa;
            visibility: hidden;
        }
      #section-to-print, #section-to-print *{
        visibility: visible;
      }
      #section-to-print {
        position:absolute; 
        left:0;
        top:0;
      }
    }
person Avi    schedule 28.01.2017
comment
Я смог сделать это, применив идентификатор к двум разделам, которые я хочу напечатать. 'id=section-to-print' для заголовка и 'id=section-to-print2' для таблицы. Я обновлю код выше. По какой-то причине заголовок и таблица, когда я просматриваю предварительный просмотр, отображаются друг над другом. Я хочу, чтобы они оба были хорошо видны. есть идеи как это сделать? Я также хочу, чтобы предварительный просмотр печати показывал цвет, который виден на столе, а теперь просто черно-белый. - person Adrew; 31.01.2017