CSS для tr:last-child { height: 100%; } или высота таблицы не работает в puppeteer PDF
У меня есть код Node.js, например:
await page.setContent(html, {waitUntil: 'networkidle2'});
const pdf = await page.pdf({
format: 'A4',
printBackground: true,
margin: {
top: '14mm', // default is 0, units: mm, cm, in, px
right: '10mm',
bottom: '35mm',
left: '12mm'
},
displayHeaderFooter: true,
headerTemplate: header,
footerTemplate: footer
});
Где я создал HTML, который правильно отображает высоту в Chrome:
Однако при запуске этого как pdf высота TR игнорируется (красная линия):
Я пробовал кучу вариантов, чтобы получить высоту таблицы и / или TR, чтобы установить полную высоту страницы для PDF, но не удалось...
Обновление 1:
Я добавил следующее, чтобы сделать снимок экрана того, как выглядит страница, добавив await page.screenshot({path: '/tmp/full_img.png', fullPage: true});
Это дает мне такое представление:
Здесь я вижу, что страница отображается правильно в «браузере», но «печатный» PDF-файл неверен.
Обновление 2:
Также я добавил границы к объектам на странице, и в PDF я вижу, что тело (желтое) и основное (зеленое), которое является контейнером таблиц, в порядке, и только таблица (голубая) не соответствует правилам:
Обновление 3:
Теперь опция «Печать» из Chrome в моем локальном браузере соответствует тому, что выводит Puppeteer:
Легче протестировать, очевидно... Я также обновлю приведенный ниже HTML-код здесь:
Спасибо, пытался использовать vh уже во многих местах, но, кажется, его все еще игнорируют. Любые попытки добавить высоту к таблице (или TR) полностью игнорируются кукловодом, кажется...
Однако, если я добавлю div в td с этим: <tr><td><div style = "height: 450px; position: relative;"> </div></td><td></td><td></td><td></td><td></td><td></td></tr> это увеличивает высоту таблицы в целом.
Да, но это статическая высота. Здесь нужно что-то динамичное
Да, в основном это было отражением того, что высота div соблюдается кукловодом, но игнорируется для стола или TR ...
Я добавил код в качестве ответа, который может решить вашу проблему. Пожалуйста попробуйте
Ответы 3
Пожалуйста, попробуйте добавить это в свой css
@media print {
html, body {
height: 100%;
}
}
Спасибо, но, к сожалению, это не имеет значения... См. обновление моего вопроса, так как я вижу, что "снимок экрана" в порядке, а PDF - нет.
Да, именно поэтому я нацелился на print в css.
Да, понял! Проверьте «Обновление 2» выше. Я добавил несколько границ, чтобы было легче увидеть фактическую высоту объектов в PDF.
Хорошо, после нескольких часов копания я обнаружил, что здесь есть две проблемы!
Во-первых, коду и таблице нужны следующие атрибуты CSS:
//node.js
await page.emulateMediaType('screen'); //<-- important
//css
.itemstable {
border-collapse: collapse;
border-spacing: 0 0;
-webkit-border-vertical-spacing: 0;
width: 100%;
height: 100%;
min-height: 198mm !important;
position: relative;
table-layout: fixed;
}
Не уверен, что все они нужны на 100%, но я больше не буду их трогать! :)
Вторая проблема заключается в том, что это похоже на ошибку в Windows!
Я запустил этот html в Edge, Chrome и Vivaldi, и все три браузера в Windows выдают указанную выше ошибку, а также запускают Puppeteer под Windows на Node.js!
Я попросил своего колледжа протестировать его на своем Mac, и он получил правильную высоту таблицы / tr в своем PDF-файле. Затем я протестировал тот же код в WSL (подсистема Windows Linux) и в AWS Lambda (Node.js), и там он отлично работает с указанными выше изменениями CSS!
У меня была такая же проблема с кукловодом, чтобы сделать счет в формате PDF. Я решил это с помощью набора ex: height: 50vh в тег <table> (или css).
Затем я поставил <tr style = "height:100%"><td></td></tr> в конце (та же структура).
<table style = "height: 50vh">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
<tr style = "height: 100%">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Можете ли вы попробовать установить высоту контейнера на
90vhс помощью этого css@media print {.yourcontainer {height: 90vh}}и проверить, может ли tr теперь растягиваться?