Member 13850628 Ответов: 1

Неограниченная длина div

мой html лайк
<div class="d-flex">
&ЛТ;див класс="левая часть задает-синий"и GT;...&ЛТ;/дел&ГТ;
&ЛТ;див класс="правой части задает-белый"и GT;...&ЛТ;/дел&ГТ;
</div>

я использую библиотеку wkhtmltopdf

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

Что я уже пробовал:

у меня есть дай

прокладка-дно:1346px

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

но это неправильное решение.
так что же мне делать?

1 Ответов

Рейтинг:
0

Jochen Arndt

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

Вы не указали, какой метод вы используете для создания PDF-файла. Но такое поколение обычно является своего рода печатью. Таким образом, вы можете использовать медиа-специфические стили CSS:

<html>
<!-- Usual headers -->
<link rel="stylesheet" type="text/css" media="all" href="css/general.css">
<link rel="stylesheet" type="text/css" media="screen, projection, tv" href="css/screen.css">
<link rel="stylesheet" type="text/css" media="print" href="css/print.css">
<!-- ... -->
Теперь вы можете определить свои стили для левой и правой частей экрана. экран и печатать файлы с различными настройками.

Я еще не тестировал его (и это может зависеть от другого содержимого вашей страницы), но вы можете попробовать установить высоту левой и правой частей на 100% для печати. Обратите внимание, что для этого необходимо установить высоту html и body разделы до 100% тоже:
/* print.css */
html, body {
    height: 100%;
}
div.left-part {
    background-color: blue;
    height: 100%;
}
div.right-part {
    background-color: white;
    height: 100%;
}
Если это не работает, попробуйте другие настройки. В целом использование специфических стилей мультимедиа значительно упрощает форматирование выходных данных для одного типа носителей, не затрагивая другие.

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