HTML в PDF не дает правильный PDF со всеми стилями

Я создал HTML-макет, когда я пытаюсь преобразовать его в PDF, он не выдает полный стиль.

Я пробовал две библиотеки "anam/phantommagick": "^1.0" а также "barryvdh/laravel-dompdf": "0.4.*"

Вот мой код:

<?php ob_start() ?>
    <div class="frame">
        <div class="horizontal-side top"></div>
        <div class="vertical-side left"></div>
        <div class="vertical-side right"></div>
        <div class="horizontal-side bottom"></div>
        <div class="right-top-corner corner-holder"><img class="right-top corner" src="<?php echo url(); ?>/20*20/hr-uper-1448949720a.jpg"></div>
        <div class="right-btm-corner corner-holder"><img class="right-btm" corner src="<?php echo url(); ?>/20*20/hr-btm-1448949720a.jpg"></div>
        <div class="left-top-corner corner-holder"><img  class="left-top corner" src="<?php echo url(); ?>/20*20/hr-uper-1448949720a.jpg"></div>
        <div class="left-btm-corner corner-holder"><img  class="left-btm corner" src="<?php echo url(); ?>/20*20/hr-btm-1448949720a.jpg"></div>
    </div>

    <style>

    .frame {
        position: relative;
        width: 500px; /* dynamic*/
        height: 500px; /* dynamic*/
    }

    .horizontal-side {
        width: 100%;
        height: 100px; /* height of image*/
        position: absolute;
        /*background-size: 100% 100%;*/
    }
    .horizontal-side.top {
        background: url('<?php echo url(); ?>/20*20/hr-uper-1448949720a.jpg') repeat !important;
    }
    .horizontal-side.bottom {
        background: url('<?php echo url(); ?>/20*20/hr-btm-1448949720a.jpg') repeat !important;
    }
    .horizontal-side.top {
        top: 0 !important;
    }
    .horizontal-side.bottom {
        bottom: 0 !important;
    }
    .vertical-side {
        width: 100px !important; /* width of image*/
        height: 100% !important;
        z-index: 9 !important;
        position: absolute !important;
    }
    .vertical-side.left {
        left: 0 !important;
        background: url('<?php echo url(); ?>/20*20/vrt-left-1448949720a.jpg') repeat !important;
    }
    .vertical-side.right {
        right: 0;
        background: url('<?php echo url(); ?>/20*20/vrt-right-1448949720a.jpg') repeat !important;
    }
    .corner-holder {
        position: absolute !important;
        z-index: 9 !important;
    }
    .right-top-corner{
        right: 0px !important;
    }
    .right-btm-corner {
        bottom: 0 !important;
    }
    .left-top-corner{
        left: 0 !important;
    }
    .left-btm-corner{
        bottom: 0 !important;
        left: 0 !important;
    }

    .corner {
        height: 100px !important; /* corner height (size of image)*/
        width: 100px !important; /*  corner width (size of image)*/
    }
    .right-top {
        clip: polygon(100% 0, 0% 100%, 0 0) !important;
        -webkit-clip-path: polygon(100% 0, 0% 100%, 0 0) !important;
        -moz-clip-path: polygon(100% 0, 0% 100%, 0 0) !important;
        -ms-clip-path: polygon(100% 0, 0% 100%, 0 0) !important;
        -o-clip-path: polygon(100% 0, 0% 100%, 0 0) !important;
        clip-path: polygon(100% 0, 0% 100%, 0 0) !important;
    } 
    .right-btm{
        clip: polygon(0 100%, 0 0, 100% 100%) !important;
        -webkit-clip-path: polygon(0 100%, 0 0, 100% 100%) !important;
        -moz-clip-path: polygon(0 100%, 0 0, 100% 100%) !important;
        -ms-clip-path: polygon(0 100%, 0 0, 100% 100%) !important;
        -o-clip-path: polygon(0 100%, 0 0, 100% 100%) !important;
        clip-path: polygon(0 100%, 0 0, 100% 100%) !important;
    }
    .left-top{
        clip: polygon(100% 0, 0 0, 100% 100%) !important;   
        -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%) !important;   
        -moz-clip-path: polygon(100% 0, 0 0, 100% 100%) !important;   
        -ms-clip-path: polygon(100% 0, 0 0, 100% 100%) !important;   
        -o-clip-path: polygon(100% 0, 0 0, 100% 100%) !important;   
        clip-path: polygon(100% 0, 0 0, 100% 100%) !important;   
    }
    .left-btm{
        clip: polygon(100% 0, 0 100%, 100% 100%) !important;   
        -webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%) !important;   
        -moz-clip-path: polygon(100% 0, 0 100%, 100% 100%) !important;   
        -ms-clip-path: polygon(100% 0, 0 100%, 100% 100%) !important;   
        -o-clip-path: polygon(100% 0, 0 100%, 100% 100%) !important;   
        clip-path: polygon(100% 0, 0 100%, 100% 100%) !important;   
    }
  </style>


 <?php $html = ob_get_clean(); 
    // by using `barryvdh/laravel-dompdf`
    $name = time() .'.pdf'; 
    $pdf = App::make('dompdf');
    $pdf->loadHTML($html);
    $pdf->save(public_path().'/' . $name);

    // by using `anam/phantommagick`
    $conv = new \Anam\PhantomMagick\Converter();
    $conv->source($html)
    ->toPdf()
    ->save(public_path().'/' . $name);

Я не получаю правильный PDF в соответствии с HTML.

Может кто-нибудь, пожалуйста, скажите мне, что здесь не так.

Спасибо

Источник

2 ответа

Решение

У меня не было никакого опыта с PhantomMagick, поэтому я не знаю об этом. Но я с большим успехом использовал DOMPDF в проекте Zend Framework.

Одна вещь, которую я должен был изучить с преобразованием HTML в PDF, состоит в том, что есть ограничения, которые нужно учитывать.

Что я могу извлечь из вашего кода, так это то, что вы используете CSS-свойство clip, которое не поддерживается в DOMPDF.

То, как я получаю хорошие PDF-файлы с помощью DOMPDF, использует макеты HTML старого стиля с таблицами, а не с плавающей точкой, клипами и т. Д. Я использую отдельный макет для создания PDF, который отображается в браузере.

Я также заметил, что вы используете $content как ваша переменная, но ob_end_clean() функция присваивается переменной $html,

Ознакомьтесь с таблицей совместимости DOMPDF по адресу https://github.com/dompdf/dompdf/wiki/CSSCompatibility

Надеюсь, это поможет.

Источник

Ты должен использовать laravel-dompdf и публиковать конфигурацию пакета, просто измените его на то, что вы считаете полезным для вас, я использую ~0.4 с laravel4 и работает как шарм

Источник
Другие вопросы по тегам