Intereting Posts

Как вы используете хороший фильтр ненормативной лексики? Присоедините две таблицы mysql с php Журнал Laravel 5 не найден Преобразование <br /> в новую строку для использования в текстовой области Вопросы PHP UTF-8 – Если я создаю строку в PHP … это в UTF-8? Разбор значений из JSON с использованием php Codeigniter / PHP проверить, можете ли подключиться к базе данных Не удалось проверить токен Google Access (неверное количество сегментов) Как вы отправляете NULL как переменную от PHP к SQL? Проблемы с размером столбца phpExcel Почему $ a + ++ $ a == 2? В чем преимущества размещения вашего Javascript в файле .php? PHP + Facebook: как загрузить фотографию на стену? Защитить php-прокси? Обновление вывода командной строки, то есть для прогресса

Печать повернутого текста с веб-страницы

Я запускаю веб-приложение, которое генерирует некоторые отчеты для пользователей. Для одного из этих отчетов мне нужно напечатать текст, повернутый на 90 градусов. Я пробовал много способов, но не нашел способ правильно его напечатать. Я могу отображать текст на этом всплывающем 90-градусном повороте с классом css ниже, но когда он отправляется на принтер, как обычно, текст поворачивается в обычную форму и печатается. Я понимаю, почему принтер не печатает, поскольку он отображается в браузере, но есть ли способ сделать это? Язык сценариев для этого сайта – PHP.

ОБНОВЛЕНИЕ: я могу напечатать текст, который был на статической странице, но не может печатать текст, повернутый, когда он всплывает. На самом деле теперь мне нужна помощь для печати страницы с стилем CSS неповрежденным

Редактировать: Это будет даже полезно, если я могу распечатать его через Firefox только в том случае, если клиент использует Mozilla Firefox.

.rotate{ -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); width:400; height:400; }

Вот как всплывающее окно показывает текст и как я хочу напечатать текст предварительный просмотр

Очень признателен!

Хм … Это работает для меня … Протестировано:

Firefox 23 (Win7, OSX)
Chrome 28 (Win7, OSX)
Safari 6 (OSX)

По общему признанию, я на самом деле не печатал его, но перенаправлял вывод печати в PDF (функция уровня ОС, ничего общего с Firefox).

Убедитесь, что в ваших правилах, определяющих поворот, не подключен какой-либо медиа-запрос, отключая их в media="print" .

Я использовал следующий примерный документ, который поставляется в виде удобного URI-данных:

 data:text/html,%3Cp%20style=%22%20-webkit-transform:%20rotate%28-90deg%29;%20transform:%20rotate%28-90deg%29;%20border:%201px%20solid%20red;%20padding:%201ex;%20width:%20100px;%20%22%3Etest%20rotate%3C/p%3E

WFM: поворот печати

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

вот как должен выглядеть ваш PHP-файл (image_gen.php):

 <?php // create a 100*100 image $im = imagecreatetruecolor(100, 100); // Write the text $textcolor = imagecolorallocate($im, 0xFF, 0xFF, 0xFF); imagestringup($im, 3, 40, 80, $_GET['text'], $textcolor); header('Content-type: image/png'); // Save the image imagepng($im); imagedestroy($im); ?>

См. Эту ссылку …

Этот файл принимает текст для вертикальной печати в качестве параметра get так:

http://example.com/example.html?text=This+Is+The+Text+To+Be+Printed+Vertically

и он возвращает изображение этого текста, напечатанного вертикально. Таким образом, вы можете сделать это в своем основном HTML-файле, который вы хотите распечатать:

 <img src = "image_gen.php?text=Hello world">

ПОЖАЛУЙСТА, ОБРАТИТЕ ВНИМАНИЕ: значения, указанные в примере кода, представляют собой только образцы значений, текста и цветов, изменяя их в соответствии с вашими целями …

так вот как вы вставляете это изображение в свой HTML-файл. Теперь, когда вы печатаете это изображение, вы должны получить изображение, напечатанное как есть, то есть с вертикальным текстом …

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

введите описание изображения здесь

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

Это должно сработать. В Chrome было протестировано следующее:

  <script type="text/javascript"> var printWindow = window.open(); printWindow.document.write('<style type="text/css">\ .rotate{\ -webkit-transform: rotate(-90deg);\ -moz-transform: rotate(-90deg);\ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);\ width:400;\ height:400;\ }\ </style>\ <div class="rotate">Rotated Content</div>'); printWindow.print(); </script>

(Обратите внимание, что я помещаю обратную косую черту, чтобы убежать.)

Если вы предпочитаете иметь невидимый кадр печати (пользователь нажимает кнопку и появляется диалоговое окно печати), используйте iframe. Просто отметьте, что Opera (вероятно, пока не переключится на вещи WebKit) не понравится.

Если ваш текст поворачивается при отображении на вашем экране, но не при его печати, то может быть, что ваш CSS применяется только на screen а не на print носителе.

Убедитесь, что значение атрибута media для all в <link> :

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

И избегайте использования screen если вы хотите, чтобы ваш файл CSS был нацелен не только на компьютерные экраны:

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

Вы также можете иметь два выделенных файла CSS, один для экранов компьютеров и один для печати, что позволяет вам больше контролировать:

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

Подробнее о media атрибуте: http://www.w3schools.com/tags/att_link_media.asp

Ура!