Ошибки отображения PDF с помощью wkhtmltopdf / tables / acrobat-reader - PullRequest
Новая
       60

Ошибки отображения PDF с помощью wkhtmltopdf / tables / acrobat-reader

4 голосов
/ 29 ноября 2011

Я сгенерировал PDF-файл, используя wkhtmltopdf из html-страницы.HTML-страница использует таблицы с границами в 1 пиксель.Если я открываю PDF с помощью Acrobat или Foxit, они случайно пропускают рисование вертикальных границ, но они появляются, если я увеличиваю изображение. Поэтому я предполагаю, что это какая-то ошибка округления, поскольку линии слишком тонкие?распечатайте PDF, он выглядит хорошо.

И я только что понял, это произойдет, только если я установлю цвет фона.

Как я могу это исправить?Вот пример PDF .Граница, разделяющая символы «a» и «b», исчезает в зависимости от коэффициента масштабирования.Я сгенерировал этот файл так: 

echo "
 <html><body>
  <span style="border: 1px solid black; background-color:red;">a</span>
  <span style="background-color:red">b</span>
 </body></html>"
| wkhtmltopdf.exe - test.pdf

Ответы [ 3 ]

6 голосов
/ 08 декабря 2011

Ваша строка не пропущена, она слишком мала для отображения на экране.

Это происходит потому, что PDF-файлы отображаются в соответствии с размером страницы, а не с размером элементов на странице.Все на странице масштабируется вверх или вниз, чтобы она вписывалась в страницу PDF, поэтому ваша линия сокращается и, следовательно, исчезает: 1/3 = 0,333 = нет строки.

Чтобы это исправить, у вас естьследующие параметры:

  1. Уменьшите размер страницы в wkhtml2pdf, используя: --page-size A4
  2. Уменьшите ширину и высоту страницы точно, используя: --page-width 9in --page-height 6in
  3. Сделайте вашу линию толще.

Вариант 3, вероятно, предпочтительнее в этом случае.Это не очень элегантное решение, но у вас не так много вариантов для игры.Если вы писали PDF на низкоуровневом уровне, то все можно было бы сделать, но поскольку вы используете wkhtml2pdf, вы ограничены тем, что он позволяет вам установить.

4 голосов
/ 06 июля 2012

У меня была похожая проблема с границами таблицы.Мне помогло использование pt вместо px в моем css.

См. W3C :

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

1 голос
/ 11 ноября 2015

Я предполагаю, что вам нужна тонкая линия, иначе вы бы не установили ширину в 1px.

Ключ к тому, чтобы в PDF-файлах, созданных с помощью wkhtmltopdf, отображались тонкие, заштрихованные границы, заключается в следующем: 

.hairline-border {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><rect x='0' y='0' width='100%' height='100%'  stroke='black' fill='white' stroke-opacity='1' /></svg>");
}

Для разделителя волос (думаю, <hr>) я использую: 

.hairline {
  height: 0.5mm;
  width: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='0mm' y1='0mm' x2='300mm' y2='0mm' style='stroke:black; stroke-width:0.25mm;' /></svg>");
}

и я использую их так: 

<div class="hairline-border"></div>

И он корректно отображается в Firefox и Safari / Chrome, и wkhtmltopdf по крайней мере сохраняет ширину линии такой, какая она есть. Было обсуждение, что преобразование SVG в base64 гарантирует большую совместимость с IE. Честно говоря, мне было все равно, доволен ли IE или нет, но, если нужно, посмотрите Встроенный SVG в CSS .

...