Блог

Как div может поддерживать свой печатный макет, при этом его можно увеличивать?

Я попытался сделать div масштабируемым с помощью jQuery, чтобы повлиять на процентное соотношение высоты и ширины div с идентификатором «страница».

 <div style="
height: 70%;
width: 70%;"
id="page">
 

По умолчанию используется значение 70% ширины и 70% высоты, если нажата кнопка , к высоте и ширине добавляется 5% (максимум 100% высоты / ширины), и обратное также верно, если нажата кнопка — -5% к высоте / ширине(минимум 10% высоты / ширины).

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

Эффект, которого я хочу достичь, отражается на сайте под названием zety.

Попробуй это:

 @media print {
   #page {
      height: 100%;
      width: 100%;
   }
}
 

Редактировать:

Если вы используете jQuery для style непосредственного изменения атрибута, вам может потребоваться добавить !important правила CSS. Я бы рекомендовал использовать jQuery для изменения CSS div #id, а не атрибута стиля html:

$("#page").css("width",70%);