Преобразование загрузочной страницы 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.