在我的pdf打印页面表中无法正确显示

Question

我在此打印页面上有一个PDF打印页面，我有一个表，我要使用col-md-4将其分成两部分，但显示错误。

我正在尝试这样显示

                                            PAY SLIP PRIN
                       POOJA FACILITY MANAGEMENT SERVICES PVT.LTD.
Employee Name : abc
User ID :9

    col-md-4            col-md-4
  Baic pay   50       PF                 ----
  DA         20       ESI                ----
  Total      70       Total Deduction    ----  

但是它显示了在波纹管图像中看到的错误方式。

我的代码：

<style>
table {
    width:100%;
    border-collapse: collapse;
}
th, td{
    border: 0.5px solid black;
}
@page {
    margin: 10px; 
    margin-header: 25px; 
    margin-footer: 25px;
}
</style>

<div class="content-wrapper"> 
<section class="content" >
  <div class="box box-primary">
    <div style="text-align: center;" class="box-header with-border">
        <h5 class="box-title">PAY SLIP PRINT </h5>
    </div>

            <div  class="col-md-12 row">
                <div class="col-md-12">
                    <div class="form-group" style="text-align: center;">
                         <b>POOJA FACILITY MANAGEMENT SERVICES PVT.LTD.</b>
                    </div>
                </div>
            </div>

    <?php 
        for ($i=0; $i < count($paySlip); $i++): 
        foreach ($paySlip[$i] as $cm):
            $tot = $cm['basic_pay']+$cm['pay_da'];
      ?>
<form role="form" id="print_pay_slip" method="POST" enctype="multipart/form-data">
<p>Employee Name :  <?php echo $cm['user_full_name']; ?></p>
<p>User ID       :  <?php echo $cm['emp_id']; ?></p>
<div class="row">
<div class="col-md-12">
<div class="col-md-1"></div>
<div class="col-md-4">

<div class="table-responsive">                      
    <table class="table table-bordered">
        <tbody>                                     

            <tr>
                <td colspan="1">Basic Pay</td>  
                <td colspan="1"><?php echo $cm['basic_pay']; ?></td>                                            
            </tr>
            <tr>
                <td>DA</td>
                <td><?php echo $cm['pay_da']; ?></td>
            </tr>
            <tr>
                <td colspan="1">Total</td>
                <td colspan="1"><?php echo $tot ?></td>
            </tr>
        </tbody>
    </table>
    </div>
</div>

<div class="col-md-4">
<div class="table-responsive">
<table class="table table-bordered">
    <tbody>                                     
        <tr>
            <td colspan="1">PF</td>  
            <td></td>                                           
        </tr>
        <tr>
            <td colspan="1">ESI</td>
            <td colspan="1"></td>
        </tr>
        <tr>
            <td colspan="1">Total Deductions</td>
            <td colspan="1"></td>
        </tr>
    </tbody>
</table>
</div>
</div>
<div class="col-md-1"></div>
</div>
</div>
</form>
    <?php
     endforeach;
     endfor;
    ?>
</section>
</div>

控制器：

public function PrintPage(){

        $data = array();
        $payslipId = $this->input->post("payslip_ids");

        for ($i = 0; $i < count($payslipId); $i++):

            $modelResult = $this->pay_model->multiPaySlipPrintPage($payslipId[$i]);
            $data['paySlip'][$i] = $modelResult;

        endfor;

        require_once 'vendor/autoload.php';
        $mpdf = new \Mpdf\Mpdf([
        'mode' => 'utf-8',
        'format' => 'A4',
        'orientation' => 'P'
        ]);

        $html = $this->load->view('pay_slip/print_pay_slip',$data, true);
        $mpdf->WriteHTML($html);
        $mpdf->Output(date('M').'_payslip.pdf', \Mpdf\Output\Destination::INLINE);

        }

[请帮助我在PDF打印页面上显示正确的表格。

Answer 1

mPDF不完全支持Bootstrap样式。一种选择是其他选择，例如，基于headless-chrome的wkhtmltopdf。

但是可以试试这个吧

就我而言，我正在将Bootstrap 3.3.7与MPDF 6.0版一起使用。它运行正常，没有任何错误。

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