Как распечатать контуры и цвета фона из CSS, при использовании JQuery printElement и IE8?

0

При печати моей table html calendar- в Chrome она отлично работает.

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

Только проблема; это не работает. Никаких изменений вообще. Я знаю, что мой css включен, потому что он работает как в Chrome, так и из-за правильной печати границ таблицы, td и tr, ширины, высоты, выравнивание, шрифты и цвета текста. Однако контуры, изображения и цвета фона игнорируются. Я дважды проверил, что параметры моего принтера в настройках IE8 установлены, чтобы включить их, и я перезапустил браузер несколько раз.

РЕДАКТИРОВАТЬ:

Я только что узнал, что мне нужно сказать IE8, что я хочу, чтобы мои цвета и такие были в двух местах. Вот ссылка, описывающая вторую: http://support.microsoft.com/kb/974128

Однако он работал только на моих цветах. Не мои контурные границы между ячейками...

Вот мой код для запуска printElement.

function printCalendar(){

     $('#printable').printElement({
          overrideElementCSS:['../css/calendarprintstyle.css'],
    printBodyOptions:{ pageTitle:'calendar'}
    }); 
}

#printable - это div, обертывающий table.

Вот пример css, который работает неправильно. Это outline и background/ background-color, которые не работают.

table{
    display: table;
    border-collapse: collapse;
    border-spacing: 0px;
    border-color: black;
    table-layout: fixed;
    font-family: arial;
    font-size: 12px;
}

th{

    background-color:blue;
    color:white;
    font-weight: bold;
    outline: 1px solid black;

}

td, tr{
    height: 20px;
    max-height: 20px;
    padding: 0px;

}


.calendar {
    border: 2px solid black;
    table-layout: fixed;
    white-space: nowrap;
    overflow:hidden;    
    float: center;
}

.calendarcell {
    outline: 1px solid black;
    height: 20px;
    white-space: nowrap;
    overflow:hidden;    
    max-height: 20px;
    width: 180px;
    max-width: 180px;
}

.datedatacell {
    outline: 1px solid black;
    width: 20px;
    min-width: 20px;
    max-width: 20px;
    border-left: 2px;
    text-align: center;

}

.holidaystyle {
    background-color: #f00;
    color: #fff;
    outline: 1px solid black;
}

.everydaystyle {
    background-color: #fff;
    color: black;
}
  • 0
    Вам необходимо включить печать фона в вашем браузере. В IE это в диалоге настройки страницы. В других браузерах этот параметр тоже есть, но возможен в другом месте.
  • 0
    Да, я только что нашел эту ссылку сам support.microsoft.com/kb/974128 . К сожалению, это повлияло только на мои цвета. Не контуры границ моей таблицы.
Показать ещё 2 комментария
Теги:
printing
internet-explorer-8

2 ответа

1
Лучший ответ

Большинство браузеров по умолчанию не печатает цвета фона и изображения, но обычно они имеют настройку, чтобы разрешить это. Для текущего IE этот параметр можно найти в диалоговом окне "Параметры страницы".

Кажется, что IE не печатает цветные границы. Вы всегда должны ожидать, что браузер не будет (или часто не может) отображать что-то точно, как указано. IE6 не может использовать display: table, браузер с сенсорным экраном не может использовать: зависание, текстовые браузеры не могут отображать разные размеры шрифтов, голосовые браузеры не могут отображать цвета, а некоторые браузеры не могут печатать цветные границы или фоны и т.д. Но так работает Интернет, и если ваша концепция дизайна требует чего-то подобного, то пришло время переосмыслить вашу концепцию дизайна.

  • 0
    Как еще одно обновление, я понял, что при печати из собственной функции принтера IE8, страница и CSS печатается точно так же, как на экране. Однако, когда я использую JQuery printElement, это как проблема с некоторыми из CSS. Я подозреваю, что это может быть связано с тем, что я читал в W3schools, о свойстве outline: Примечание: IE8 поддерживает свойство outline только в том случае, если указан! DOCTYPE. Возможно, тип документа не включается при печати только div. Или, может быть, printElement и IE8 не подыгрывает ...
  • 0
    Не используйте W3Schools, это плохой сайт, полный ошибок: w3fools.com
Показать ещё 5 комментариев
0

вам нужно выполнить две задачи:

сначала: обратите внимание, что IE8 не распознает теги HTML5 и HTML5shiv (если вы его включили) не работает во время печати, попробуйте включить этот файл (HTML5shiv print) также в свой документ

вы также можете получить html5shiv и html5print с сайта modernizr

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

но обратите внимание, что ваша основная проблема заключается в том, что HTML5, который не поддерживается в IE8, и чтобы исправить эту проблему, люди, использующие

https://code.google.com/p/html5shim/

или Modernizer или HTML5Shiv, когда они имеют дело с IE8 и более низкой версией на странице HTML5, эти библиотеки позволяют старым браузерам правильно отображать страницы HTML5

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

<!--[if lte IE 8]><link rel="stylesheet" media="print" href="/print.css" type="text/css" /><![endif]-->

после этого вы должны создать файл print.css и добавить нужные стили.

это запрос печати @media, и цель состоит в том, чтобы отделить основную форму формы отпечатка

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

но, пожалуйста, не то, что эти библиотеки не работают во время печати

если вы хотите, чтобы IE8 и более низкие версии распознавали теги HTML5 в режиме печати, вы должны добавить другие js-библиотеки, например

https://github.com/aFarkas/html5shiv/blob/master/src/html5shiv-printshiv.js

HTML5shiv.print с веб-сайта Модернизатора

  • 0
    Я хочу прояснить, что у меня уже есть отдельные стили печати и отображения. И что отдельная таблица стилей печати передается на принтер. Однако, если мне нужна отдельная таблица стилей для IE8, я хотел бы знать, что вы предлагаете мне сделать по-другому в этом CSS, по сравнению с тем, который я прикрепил выше. Честно говоря, я не думаю, что проблема, которую я передаю, является проблемой, скорее, что я не могу сказать браузеру / принтеру, что я хочу, чтобы мои цвета фона и изображения были напечатаны.
  • 0
    Если вы хотите отделить таблицу стилей печати для IE8, вы должны включить тег, как я уже упоминал. Общий тег печати работает в других браузерах, но если вы нацелены на IE8, вы должны использовать специальный тег.
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню