Bootstrap 无法在 pdf 中工作

Question

这是我的控制器代码

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>

现在我得到一个 pdf，其中 heading1 和 heading2 分两行。 Bootstrap 无效。我错过了什么吗？

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

当我尝试这个时，它工作正常，heading1 和 heading2 排成一行。在 pdf 中它不起作用

Answer 1

您可以使用 $mpdf->WriteHtml($stylesheet, 1) 功能在您的 pdf 中添加自定义样式表，有关更多信息，您可以查看此 link 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();
}

Answer 2

我在 github 中发布了一个问题，mpdf 人员告诉我 bootstrap 在 mpdf 中不支持 out-of-the-box 并且你必须使用一些自定义样式。 Github link

Answer 3

来自@Bloodhound post - 这个解决方案很适合我

.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;
}

Answer 4

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

将它添加到样式表中解决了我的问题:)

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

Bootstrap 无法在 pdf 中工作

Bootstrap not working inside pdf

twitter-bootstrap

pdf

twitter-bootstrap-3

yii2

mpdf