Есть ли хитрость для печати фона таблицы HTML? - PullRequest
4 голосов
/ 25 июня 2011

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

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

Есть ли хитрость для печати таблицы HTML, как вы видите ее на экране?Может быть, можно как-то преобразовать его в изображение или что-то еще?


Вот решение, которое я придумал.Ниже приведен пример создания печатной платы 3x2 с ячейками 100pt x 100pt.Я максимально упростил фрагмент.Основная идея: в каждой ячейке есть изображение, наложенное на текст.Это намного медленнее, чем простой фоновый цвет, но позволяет использовать одну кодовую базу для экрана и печати.Вы можете избавиться от внутреннего пробела с помощью дополнительных стилей.

<table style="table-layout:fixed; width:300pt; height:200pt; border-collapse:collapse; line-height: 0;">
    <tr>
        <td>
        <img src="Content/images/backTab.png" style="width:100pt; height:100pt; position:relative; z-index:0" />
        <div style="position:relative; top:-50pt; z-index:1; color:Red; text-align:center; ">Text</div>
        </td>

Я новичок в веб-разработке, и я нашел всю ситуацию нелепой.Тысячи разработчиков плачут о печати цвета фона / изображения, но все равно.Я посмотрел на W3C HTML / CSS / Стандарты печати.Там нет ничего о подавлении фона на печать.Если браузеры принимают решение сэкономить пользовательские чернила, должен существовать стиль CSS для явного применения фоновой печати.В этом случае не будет глупых сложностей показать и напечатать шахматную доску, или кроссворд, или календарь.

Если у кого-то есть соединения в W3C, пожалуйста, сообщите им.

Ответы [ 3 ]

1 голос
/ 25 июня 2011

Вы можете создать файл CSS и указать его в HTML, что он должен использоваться для печати:

http://www.alistapart.com/articles/goingtoprint/

Однако для таких настроек, как печать на экране, необходимо изменить настройки в настройках печати в веб-браузерах.

К сожалению, без индивидуального решения обойти это невозможно.

Вы можете поиграть с Prototype Javascript и назначить HTML элемент canvas, который создаст изображение на стороне клиента.

http://prototype -graphic.xilinus.com /

Надеюсь, это поможет,

Джеффри Кевин Прай

0 голосов
/ 25 июня 2011

Также в дополнение к моему комментарию вы можете попробовать использовать: http://iecapt.sourceforge.net/ обновление: также эта статья, вероятно, может быть полезна. http://www.codeproject.com/KB/graphics/html2image.aspx

0 голосов
/ 25 июня 2011

Не могли бы вы использовать изображения 10х10 с цветом фона, о котором вы думаете, и настроить их повторение по всему фону с помощью CSS? (Фиксированные цветные изображения очень легко сжимаются и имеют тенденцию быть маленькими, не беспокойтесь о размере, как указано в комментариях).

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