HTML to pdf not giving correct pdf with all styling

Question

I have created a html layout, when I am trying to convert this into pdf it is not giving out put with complete styling.

I have tried two libraries "anam/phantommagick": "^1.0" and "barryvdh/laravel-dompdf": "0.4.*"

Here is my code:

<?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);

I am not getting the proper pdf as per the html.

Can some one please tell me what is wrong here.

Thanks

so is there any way to create pdf or image from html code with full styling — Anshul Mishra, Dec 01 '15 at 10:08

score 1 · Accepted Answer · answered Dec 01 '15 at 10:23

1

I haven't had any experience with PhantomMagick so I don't know about that. But I have used DOMPDF with great success on a Zend Framework project.

One thing I had to learn with converting HTML to PDF is, there are limitations one has to consider.

What I can gather from your code is you are using the CSS 'clip' property which is not supported with DOMPDF.

The way I get good PDFs with DOMPDF is using old style HTML layouts with tables and not floats, clips etc. I use a separate layout for PDF creation to what is displayed on the browser.

I also noticed that you are using $content as your variable but the ob_end_clean() function is being assigned to the variable $html.

Have a look at the compatibility chart for DOMPDF at https://github.com/dompdf/dompdf/wiki/CSSCompatibility

Hope that helps.

answered Dec 01 '15 at 10:23

Shaun Freeman

450
3
7

thanks for your answer, but I do not have any other way to create this layout without clip. If you can tell me any pdf generator that support all styling that would be great. And I have edited my question as there was a mistake in variable name. – Anshul Mishra Dec 01 '15 at 10:35
From what I can see most free PHP PDF converters will cope best with HTML 4.01 and CSS 2. You could try HTML2PDF. But without going down the expensive paid for solutions or creating PDFs from scratch with a PDF library like Zend PDF, I still think DOMPDF is the best. – Shaun Freeman Dec 01 '15 at 10:49
Okay thanks, is there any simple way to convert html layout to image (any format) – Anshul Mishra Dec 01 '15 at 11:10
To achieve what you want you would be better creating the image in PHP with either the GD and Image functions http://php.net/manual/en/ref.image.php or better still the Imagick class http://php.net/manual/en/class.imagick.php then rendering the result to PDF. – Shaun Freeman Dec 01 '15 at 11:23

score 0 · Answer 2 · answered Dec 01 '15 at 10:22

0

you should use laravel-dompdf and publish the configuration of the package the just change it to whatever you think is good for you , I use ~0.4 with laravel4 and its working like a charm

answered Dec 01 '15 at 10:22

Zaher

1,120
7
18

I have also tried `laravel-dompdf`, i have mentioned in the question. Its not working perfect for me – Anshul Mishra Dec 01 '15 at 10:32

HTML to pdf not giving correct pdf with all styling

2 Answers2