How to use bootstrap in mPDF?

Question

I am currently using mpdf to generate my pdfs from html. So far with my current html that I am passing in, I am able to generate a one page pdf with a header and footer. However, if there is more than one page, my footer goes all the way to the bottom of the second page. Is there a way to add a header and footer for each page?

I have tried $pdf->setHTMLHeader but it doesn't seem to take my css files in and it leaves an x where my logo is supposed to be. How can I do this? I have tried searching in various places but I can't seem to find a solution.

This is my code

public function generate_pdf($account_id,$transaction_id,$html){
        $document_folder = $_SERVER['DOCUMENT_ROOT']."/".DOCUMENT_FOLDER."/".PAYMENT_RECEIPTS."/".date("Y");
        $extension = ".pdf";
        if(!is_dir($document_folder)){
            mkdir($document_folder, 0777,true);
        }
        $file_name = md5($transaction_id.$account_id);
        $this->load->library('m_pdf');
        $pdf = $this->m_pdf->load();
        $header = $this->load->view('pdfs/header','',true);
        $footer = $this->load->view('pdfs/footer','',true);
        $pdf->setHTMLHeader($header);
        $pdf->setHTMLFooter($footer);
        $pdf->AddPage('', // L - landscape, P - portrait 
            '', '', '', '',
            5, // margin_left
            5, // margin right
           60, // margin top
           30, // margin bottom
            0, // margin header
            0
        ); // margin footer
        $pdf->WriteHTML(base64_decode($html));
        $pdf->Output($document_folder."/".$file_name.$extension, "F");
        $result = array(
            'file_name'=>$file_name,
            'file_location'=>$document_folder."/".$file_name.$extension,
            'file_link'=>DOCUMENT_LOCATION."/".DOCUMENT_FOLDER."/".PAYMENT_RECEIPTS."/".date("Y")."/".$file_name.$extension
        );
        return $result;
        exit;

    }

Also, is there a way to know if the output of the PDF was successful? Currently $pdf->Output only returns ""

Thank you

Solution 1

mPDF does not support Bootstrap styles entirely. An option would be some alternative such as headless-chrome based wkhtmltopdf.

one of the mpdf guy told that bootstrap not supported out-of-the-box inside mpdf and you have to use some custom style. Github link

Hope this will help to solve your problem.

Solution 2

Here is a Bootstrap CSS file for mPDF: https://github.com/kartik-v/yii2-mpdf/blob/master/src/assets/kv-mpdf-bootstrap.css

It is part of the kartik-v/yii2-mpdf PHP library which encapsulates mPDF.

Solution 3

In my case, I'm using Bootstrap 3.3.7 with MPDF version 6.0. It's working perfectly without any error.

$stylesheet = file_get_contents('css/bootstrap-3.3.7.min.css');
$pdf->WriteHTML($stylesheet, 1); // CSS Script goes here.
$pdf->WriteHTML($html, 2); //HTML Content goes here.
$pdf->Output();

Comments

[JianYA]

I wanted to try wkhtmltopdf but I was worried about the speed. Thank you though.

[Param Bhat]

I will suggest using an inline stylesheet. If my answer really helped you please vote up and accept the answer.

[JianYA]

I'll try it. For now I'll accept the answer and give you the bounty, Thanks

[Silambarasan R.D]

Try with Bootstrap 3.3.7 It's working without error.

[Param Bhat]

@silambarasanR.D - Why downvote? I said mPDF does not support Bootstrap styles entirely. Is Bootstrap 3.3.7 all tags are working fine in mPDF? Have you tried all styles?

[Silambarasan R.D]

He was just asked 'How to use Bootstrap in MPDF' not an alternative(wkhtmltopdf). I've also faced this problem, so I thought it would be helpful to others.