веб-печать на javascript. печать логотипа в заголовке каждой страницы

ProgramBox

веб-печать на javascript. печать логотипа в заголовке каждой страницы

Post author:admin
Запись опубликована:3 февраля, 2023
Post category:Вопросы по программированию

#javascript #jquery #css #jquery-ui

#javascript #jquery #css #jquery-пользовательский интерфейс

Вопрос:

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

 @media print {
    .barcode{
        position: fixed;
    }
}

Чтобы изображение появлялось на каждой странице при печати. но на второй или третьей странице изображение будет перекрывать содержимое страницы, как на скриншоте.
Штрих-код перекрывает ячейки данных в таблице

1. вы сталкивались с подобной проблемой. или есть решение. любая помощь будет признательна.

2. Итак, если я правильно понимаю, вы хотите, чтобы штрих-код был на каждой странице без перекрытия какого-либо содержимого?

3. Есть ли у вас какое-либо решение для достижения этой цели?

Ответ №1:

Вы можете попробовать что-то вроде этого:

HTML

 <div class='barcode'><!-- Barcode content --></div>

CSS

 .barcode { display:none; }

@media print {
  .barcode  { display: block; position: fixed; top: -20px; height: 50px; }
}

Div должен быть расположен фиксированно, чтобы отображаться на каждой печатной странице. Вы можете попробовать настроить свойство top на положение и переместить его над содержимым.

1. Привет, Джоуи, спасибо за ваше решение. но я боюсь, что он не может гарантировать, что штрих-код может отображаться на каждой странице.

2. После еще некоторых исследований я скорректировал свой ответ.

3. к сожалению, не работает. заголовок печатной страницы заблокирует штрих-код.

Ответ №2:

После повторного рассмотрения этого гораздо лучшим решением было бы создать PDF-версию страницы для печати. Тогда у вас будет гораздо больше контроля. Существует множество библиотек PDF для всех серверных языков.

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

2. Я рад, что вы нашли мое предложение полезным. Пожалуйста, проголосуйте и примите ответ.

Ответ №3:

Это невозможно контролировать напрямую. Что вы можете попытаться сделать, так это регулярно принудительно разрывать страницы и применять высоту к этому разделителю div. Например:

 @media all
{
  div.page-break  { display:none; }
}

@media print
{
  div.page-break  { display:block; height: 100px; page-break-before:always; }
}

Однако это сработает, только если вы разместите <div class="page-break"></div> на своей странице достаточное количество символов s, чтобы один появлялся перед каждым естественным разрывом страницы.

Ссылка: http://davidwalsh.name/css-page-breaks

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

2. После каждых N записей (например, каждые 20 записей) добавьте разрыв. Поэкспериментируйте, чтобы увидеть, что работает.

3. хорошо, попробую. Спасибо. 🙁 на странице есть несколько разделов. в каждом разделе есть переменные записи.

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

Ответ №4:

Извините, я не говорю по-английски. Я решил аналогичную проблему, следуя инструкциям на этой странице: http://thewebthought.blogspot.com/2011/10/html-css-header-and-footer-elements-for.html