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.
Может кто-нибудь, пожалуйста, скажите мне, что здесь не так.
Спасибо
Решение
У меня не было никакого опыта с 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 и работает как шарм