CODEWITHSUNDEEP
htmlcsspdf
Alluma
Alluma

Reputation: 11

How to Center a bordered content when converting from html to pdf

I have an html page with contents inside a border with 7px which has to div, the parent and child div, I am trying to convert it to pdf, but when I do so, the page is aligning more to the right, leaving a huge space to the left. But when the same page is viewed in html, it is correctly centered. Th

What I need to achieve is to center the border and its content in the PDF file. The parent div has the following css

``` #wrapper{
    width: 740px;
    /*margin: 2px auto;*/
    margin: auto;
    /*border: solid  red;*/
    height: 1000px;
    page-break-after: avoid;
}```

and the child div has the following css

```#maincontent{
    border: solid 7px black;
    /*margin: 2px auto 100px;*/
    /*margin: 2px auto;*/
    margin: auto;
    height: 98.2%;
    /*width: 98%;*/
    width: 720px;
    display: block;
    page-break-before: avoid;
    break-after: avoid;
}```

Upvotes: 0

Views: 287

Answers (2)

Alluma
Alluma

Reputation: 11

The laravel-dompdf is a nice library but does it is not great when dealing with css, so there is a wkhtmltopdf which is a CLI tool that uses the WebKit rendering engine. There is a PHP library named laravel-snappy which created a wrapper to wkhtmltopdf and converts html to pdf/image, available for almost all operating systems. The full explanation and link to manual documentation is available at [link]https://github.com/barryvdh/laravel-snappy

Upvotes: 1

Weyers de Lange
Weyers de Lange

Reputation: 290

With MPDF do not style inside your HTML print page it will not work. Add style to your controller or .CSS or add styling above your HTML not inside. Please note the row style is !important you need to add that to your style. Also note the bootstrap not all bootstrap versions is MPDF friendly. Version 3.4.1 work for me.

<?php
$mpdf = new \Mpdf\Mpdf();
$stylesheet = file_get_contents('https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css');
$mpdf->WriteHTML($stylesheet, \Mpdf\HTMLParserMode::HEADER_CSS);
$stylesheet = '<style>
    .row {
        margin: 10px 0px 0px 0px !important;
        padding: 0px !important;
    }
    .wrapper{
    width: 740px;
    /*margin: 2px auto;*/
    margin: auto;
    /*border: solid  red;*/
    height: 1000px;
    page-break-after: avoid;
    }
    .maincontent{
    border: solid 7px black;
    /*margin: 2px auto 100px;*/
    /*margin: 2px auto;*/
    margin: auto;
    height: 98.2%;
    /*width: 98%;*/
    width: 720px;
    display: block;
    page-break-before: avoid;
    break-after: avoid;
    }
</style>';
$mpdf->WriteHTML($stylesheet, \Mpdf\HTMLParserMode::HEADER_CSS);
$mpdf->WriteHTML(view('/print/print_jobcard', $data), \Mpdf\HTMLParserMode::HTML_BODY);
$mpdf->Output($data['jobcard'][0]['job_number'].'.pdf', 'D');
?>

<!DOCTYPE html>
<html>
<body>

<div >
   
    <br style="height: 15mm; margin: 0;">
    <div class="row">
        <div class="col-xs-8 col-sm-8"><h4>Date</h4></div>
        <div class="col-sm-8"><h4 style= "text-align:center"> Lorem Ipson</h4></div>
    </div>
 
    <br style="height: 30mm; margin: 0;">
    <div class="row">
        <div class="col-xs-4 col-sm-4"><h4>Name</h4></div>
        <div class="col-xs-4 col-sm-4"><h4>Email</h4></div>
        <div class="col-sm-4"><h4>Tel</h4></div>
    </div>
   
</div>

</body>
</html>

Upvotes: 0

Related Questions