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

Answer 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.

Answer 2

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

Answer 3

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.

Answer 4

remove

@media

blocks from bootstrap style file drop and use basic css commands