Search code examples
phphtmlcsspdfmpdf

Including CSS file to mpdf


I am trying to implement a CSS file to my mPDF file. Here is my mPDF file:

    $pdf_output = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
        <html xml:lang="en">

        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>' . get_bloginfo() . '</title>';

    $cssFile = __DIR__.DIRECTORY_SEPARATOR.'styles.css';
//   echo $cssFile;
    if (file_exists($cssFile)) {
        $pdf_output .= '<style type="text/css">'.file_get_contents($cssFile).'</style>';
    }

    $pdf_output .= '</head>
        <body xml:lang="en">
            <pagebreak>
            <div id="header"><div id="headerimg">
                <h1><a href="' . get_option('home') . '/">' .  get_bloginfo('name') . '</a></h1>
                <div class="description">' .  get_bloginfo('description') . '</div>
            </div>
            </div>
            <div id="content" class="widecolumn"><div id="test">Lorem ipsum dolorem sit amet</div>';

            if(have_posts()) :
            while (have_posts()) : the_post();
                $pdf_output .= '<div class="post">
                <h2>' . $pageTitle . '</h2>';

                $pdf_output .= '<div class="entry">POST: ' .    wpautop($post->post_content, true) . '</div>';
                $pdf_output .= '</div> <!-- post -->';
            endwhile;

        else :
            $pdf_output .= '<h2 class="center">Not Found</h2>
                <p class="center">Sorry, but you are looking for something that isn\'t here.</p>';
        endif;

        $pdf_output .= '</div> <!--content-->';



$pdf_output .= '
        </body>
        </html>';

Everything the styles.css says is completely ignored as if the file wasn't even loaded. Interestingly enough, if I append

     echo '<pre><div id="output">'.$pdf_output.'</div></pre>';
     exit;

to the very end I get an HTML page and everything works just fine. Where exactly is my error here? I guess it's some kind of option in the mPDF settings.


Solution

  • OP found out the solution from the comments, so I'll add it here just for the sake of closure:

    It seems mPDF doesn't support CSS in style tags (see here: https://mpdf.github.io/css-stylesheets/introduction.html). In this case, you could replace this:

    $cssFile = __DIR__.DIRECTORY_SEPARATOR.'styles.css';
    
    if (file_exists($cssFile)) {
        $pdf_output .= '<style type="text/css">'.file_get_contents($cssFile).'</style>';
    }
    

    By this:

    $cssFile = __DIR__.DIRECTORY_SEPARATOR.'styles.css';
    
    if (file_exists($cssFile)) {
        $pdf_output .= '<link rel="stylesheet" href='.$cssFile.'></link>';
    }
    

    Or else use the alternative approach that's calling mPDF's WriteHTML() twice, once for the stylesheet and another for the body, as on the example on the documentation above.