引导面板标题背景色一半着色domPDF

Question

Like title said, below are the encountered problem.

View on browser :

After converted into pdf using domPDF , background color looks so ugly:

Working Environment

• DomPDF : 0.7.x@beta
• Bootstrap Framework : Bootstrap v3.3.5

Relevant Code :

// instantiated Dompdf obj
$dompdf = new Dompdf();
// model method for data populating
$data = $this->populateStatus( 31 );
// call the view together with data
$page = $this->load->view('model/controller', $data, true );
$dompdf->loadHtml( $page );
// (Optional) Setup the paper size and orientation
$dompdf->setPaper('A4', 'landscape');
// Render the HTML as PDF
$dompdf->render();
// Output the generated PDF to Browser
$dompdf->stream();

Am include Stylesheet using external css and the html for that background is just a simple panel :

<div class="panel panel-default">
    <div class="panel-heading page">
       Text Here
    </div>
</div>

Is there any workaround on this? Plese let me know if any of you want more input or any relevant code sample. Thanks.

Answer 1

There is a bug in dompdf (up to 0.7.0) when using border radius if the bottom-left corner does not have a radius applied. In this situation dompdf doesn't correctly complete the mask definition resulting in the alternate side short-cutting back to the origin point.

To work around the issue you can apply a small border radius of 1px to the bottom-left corner.

For a Bootstrap panel you could just add the following CSS to your stylesheet:

.panel-heading { border-bottom-left-radius: 1px; }