Bootstrap在pdf中不起作用

时间:2015-11-14 05:37:42

标签: twitter-bootstrap pdf twitter-bootstrap-3 yii2 mpdf

这是我的控制器代码

public function actionPrint_death_certificate1()
    {

        $this->layout   =   'certificate';


        $html   =   $this->render('test');
        require_once(Yii::$app->basePath . "/../vendor/mpdf/mpdf/mpdf.php");
        $mpdf=new mPDF();
        $mpdf->WriteHTML($html);
        $mpdf->Output();

    }

我的观点

<div class="container">
    <div class="row">
        <div class="col-md-6">
        Heading1
        </div>
        <div class="col-md-6">
        Heading2
        </div>
    </div>
</div>

现在我在两个不同的行中得到一个带有heading1和heading2的pdf。 Bootstrap不起作用。我错过了什么吗?

return $this->render('test');

当我尝试这个时,它正在工作,而heading1和heading2正在一行中。在pdf中,它无法正常工作

4 个答案:

答案 0 :(得分:1)

来自@Bloodhound帖子 - 这个解决方案对我很有用

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    border:0;
    padding:0;
}

答案 1 :(得分:0)

您可以使用$mpdf->WriteHtml($stylesheet, 1)功能在pdf中添加自定义样式表,有关详细信息,请查看此链接http://mpdf1.com/manual/index.php?tid=254

public function actionPrint_death_certificate1()
{
    $this->layout = 'certificate';
    $html = $this->render('test');
    $stylesheet = file_get_contents('style.css');
    require_once(Yii::$app->basePath . "/../vendor/mpdf/mpdf/mpdf.php");
    $mpdf = new mPDF();
    $mpdf->WriteHTML($stylesheet, 1);
    $mpdf->WriteHTML($html);
    $mpdf->Output();
}

答案 2 :(得分:0)

我在github上发布了一个问题,并且mpdf的人告诉mpdf内部 bootstrap不支持开箱即用,你必须使用一些自定义样式。 Github link

答案 3 :(得分:0)

我发现这是由bootstrap框架的打印样式引起的。

将其添加到样式表中可以为我解决问题:)

@media print {
    @page {
        size: auto;
    }
}