Преобразование загрузочной страницы Twitter в PDF с помощью wkhtmltopdf: span issue
Я использую Symfony2 Bundle KnpSnappyBundle, чтобы преобразовать шаблон html twig в pdf.
KnpSnappyBundle основывается на Snappy оболочке, которая использует wkhtmltopdf.
Мой шаблон использует twitter bootstrap 2.3.2 css вот так:
<div class="container">
<div class="row">
<div class="span12">
<h4>TITLE</h4>
</div>
</div>
<div class="row">
<div class="span6" id="customers">
<h5>TITLE</h5>
<p>TEXT</p>
<ul class="unstyled">
<li>LIST ITEM</li>
<li>LIST ITEM</li>
<li>LIST ITEM</li>
<li>LIST ITEM</li>
</ul>
</div>
<div class="span6" id="estimate">
<h5>TITLE</h5>
<ul class="unstyled">
<li>LIST ITEM</li>
<li>LIST ITEM</li>
<li>LIST ITEM</li>
<li>LIST ITEM</li>
</ul>
</div>
</div>
</div>
Проблема: клиенты и расчетные промежутки не находятся на той же линии, что и должны быть.
Я не знаю, что происходит.
Ответы
Ответ 1
Вот решение для Bootstrap3: всегда используйте .col-xs-n.
Причина в том, что wkhtmltopdf не поддерживает css в блоке @media. В bootstrap3 используется только правило col-xs-n вне блока @media.
Я проверил bootstrap2.3.2 css, кажется, что правила spanN всегда находятся внутри блока @media.
Таким образом, уродливое решение будет скопировано из всех правил spanN в верхний уровень в другой файл css и включит его в html.
Ответ 2
Я знаю, что этот вопрос старый, но эта проблема все еще возникает. В недавнем проекте Laravel 5.8 и Twitter Bootstrap 4.0.0. Мне удалось использовать .col-md.col
и получить отличные результаты, выполнив следующие действия:
При добавлении --viewport-size 1024x768
в config/snappy.php
'pdf' => array(
'enabled' => true,
'binary' => "C:\wkhtmltopdf\bin\wkhtmltopdf --viewport-size 1024x768",
'timeout' => false,
'options' => array(),
'env' => array(),
)
Тогда, на ваш взгляд, используйте .col-md
или .col
без проблем.
Обратите внимание, Bootstrap 4
в ваш HTML, используя открытый путь.
//Laravel
<link rel="stylesheet" href="{{public_path('css/bootstrap4/bootstrap.min.css')}}">
Ответ 3
Если вы просто пытаетесь создать PDF-адрес размещенной веб-страницы, вы можете сделать это бесплатно с помощью Internet Explorer.
Мне пришлось сделать это для некоторых клиентов, которым требуется просмотр их веб-страниц и рассылок электронной почты в формате PDF для одобрения.
- Откройте веб-страницу в Internet Explorer.
- Нажмите F12 на клавиатуре, и он откроет инструменты проверки.
- Выберите значок для "Эмуляция" . Это значок компьютера или телефона.
Это позволяет вам выбрать, какую версию IE вы хотите подражать
ваша страница. я выберите IE8, чтобы получить отзывчивые страницы и электронные письма.
как они были бы на полном рабочем столе.
- Тогда в верхнем правом углу вашего браузера должен быть значок (земля с небольшим PDF-документом рядом с ним), выберите это раскрывающееся меню и выберите "Преобразовать веб-страницу в PDF"
Это должно автоматически создавать PDF файл вашей веб-страницы как можно точнее даже с отзывчивым CSS.