phantomjs неверный pdf-рендеринг

Question

Я пытаюсь создать pdf-файл с html-страницы. html очень прост и отображает центрированное изображение для каждой страницы.

css У меня есть работа правильно, когда я визуализирую html, но это не происходит, когда я пытаюсь создать pdf-файл из него с помощью node-html-pdf.

Я также создал небольшой экспресс-приложение на GitHub, который воспроизводит проблему: https://github.com/aschmid/phantomjs2pdf

что странно в формате PDF является то, что первые 2 страницы правильно делают.
Затем каждая страница после этого составляет 200% от размера предыдущей:

я уверен, что это проблема с CSS. Также я хочу создать правила CSS, которые будут применяться к каждой бумаге (письмо, таблоид, A4, ....) или ориентации (портрет, пейзаж) и центрировать изображение на странице в pdf.

Может ли кто-нибудь указать мне в правильном направлении?

Answer 1

Встроенная копия среды в моей машине и понял, добавив этот код исправили проблему:

html, body { 
    max-height:100%; 
} 

Сначала я думал, что это был

top: 50%; 
left: 50%;-webkit-transform: translateX(-50%) 
translateY(-50%); 

трюк, но это WASN «т. Мой тег max-height на теле и html гарантирует, что ничто не пройдет мимо вашей страницы.

Кроме того, и, хотя это не совсем верно задавать разные вещи в одном вопросе, вот некоторый код, чтобы установить Вас на трассе делает эту работу для альбомной и портретной режимов:

@media screen and (orientation:portrait) { 
     .page .imgWrapper img { 
      -ms-transform: rotate(90deg); 
      -webkit-transform: rotate(90deg) translateX(-29%) translateY(87%); 
     } } 

Это будет найдите положение своего окна просмотра и центрируйте изображение для портретного режима. Странные значения translate вызваны странными взаимодействиями с rotate. Возможно, это не реализовано для работы с html-pdf, но это начало. Удачи.