Wkhtmltopdf Символы в одной строке частично обрезаются между страницами

Question

Я работаю в проекте с использованием ruby ​​на рельсах (3.1). Мое требование состоит в том, чтобы произвести PDF из содержания HTML. Поэтому я использую pdfkit gem.

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

версия wkhtmltopdf: wkhtmltopdf - 0.11.0 rc1

операционная система: Linux CentOS 5.5

На изображении ниже показан символ, частично вырезанный между страницами.

Пожалуйста, предложите решение.

Пример 1

Пример 2

Answer 1

Я просто наткнулся на это и нашел что-то, что решило проблему для меня. В моем конкретном случае были div с display: inline-block; margin-bottom: -20px;. Как только я изменил их на блокировку и сбросил нижнее поле, разделение строк исчезло. YMMV.

Answer 2

Согласно некоторой документации , которую я обнаружил (см. Разрыв страницы), это известная проблема и предлагает использовать разрывы страниц CSS для вставки разрывов страниц (при условии, что вы используете исправленную версию QT):

Текущий алгоритм разрыва страницы WebKit оставляет желать лучшего желательно. По сути, WebKit будет рендерить все в одну длинную страницу, а затем разрезать его на страницы. Это означает, что если у вас есть два столбца текста, где каждый вертикально сдвинут на половину строки. Тогда вебкит разрезает линию на части, отображая верхнюю половину на одной странице. А также нижняя половина на другой странице. Это также сломает изображение в два и скоро. Если вы используете исправленную версию QT, вы можете использовать CSS свойство разрыва страницы, чтобы исправить это несколько. Там не легко Решение этой проблемы, пока это не решено, попробуйте организовать ваш HTML-документы, содержащие много строк, на которых могут быть резать аккуратно.

Смотри также: http://code.google.com/p/wkhtmltopdf/issues/detail?id=9, http://code.google.com/p/wkhtmltopdf/issues/detail?id=33 и http://code.google.com/p/wkhtmltopdf/issues/detail?id=57.

Answer 3

У меня была эта проблема с таблицей:

Затем я добавил это в свой CSS:

table, img, blockquote {page-break-inside: avoid;}

Это решило проблему:

Answer 4

В моем случае проблема была решена путем комментирования следующего css:

html, body {
  overflow-x: hidden;
} 

В общем, проверьте, есть ли у каких-либо тегов overflow, установленный как hidden, и удалите его или установите егоvisible.

Кстати, я использую wkhtmltopdf version 0.12.2.1 в Windows 8.

Answer 5

Я искал в интернете пару недель, пытаясь решить эту проблему.Ни одно из найденных мной решений не сработало для меня, но что-то еще сработало.

У меня был двухколонный макет, где текст обрезался в середине текста.В сломанном состоянии моя основная структура выглядела так:

@media print {
  * {
    page-break-inside: avoid;
    page-break-after: avoid;
    page-break-before: avoid;
  }
}
.col-9{
  display: inline-block;
  width: 70%;
}
.col-9{
  display: inline-block;
  width: 25%;
}

<div class="col-9">
  [a lot of text here, that would spill over multiple pages]
</div>
<div class="col-3">
  [a short sidebar here]
</div>

Я исправил ее, изменив на:

@media print {
  * {
    page-break-inside: avoid;
    page-break-after: avoid;
    page-break-before: avoid;
  }
}

.col-9{
  display: block;
  float: left;
  width: 70%;
}
.col-9{
  display: block;
  float: left;
  width: 25%;
}
.clear{
  clear: both;
}

<div class="col-9">
  [a lot of text here, that no longer split mid-line.]
</div>
<div class="col-3">
  [a short sidebar here]
</div>
<div class="clear"></div>

По какой-то причине инструмент не смог обработать дисплей:настройка встроенного блока.Работает с поплавками.Я использую версию 0.12.4.

Answer 6

Проблема с вырезанным текстом - это известная проблема webkit, и, похоже, разработчики нашли решение внутри wkhtmltopdf. Обновление до 0.12.1 решит проблему с вырезанным текстом (если вы не хотите тратить время на компиляции, вы можете просто взять двоичный файл отсюда: https://github.com/h4cc/wkhtmltopdf-amd64).